畫布 canvas

初始化

<canvas id="myCanvas" width="200" height="200" border="1"></canvas>

<script>
var c = document.getElementById("myCanvas"); 
//c.width=200;
//c.height=200;
</script>

畫線

    <canvas id="myCanvas" width="400" height="400" style="border:2px solid #eee"></canvas>
 

    <script>
    var c = document.getElementById("myCanvas"); //獲取要操作的canvas
    var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境物件
    ctx.moveTo(10,10);   //定義繪畫開始的位置
    ctx.lineTo(150,50);  //畫一條直線，結束點座標是x=150,y=50
    ctx.stroke();  //描邊
    </script>

stroke描邊

描邊加顏色

    ctx.strokeStyle = "red"
 
;    //設定描邊顏色為紅色，只要寫在.stroke()方法前面即可
    ctx.stroke();  //描邊

圖案描邊

 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d"); 

 pic = new Image();   //建立圖片物件，或者 pic = document.createElement('img')
 pic.src = "http://test.com/a.jpg";   //定義圖片的對映地址
 var redTexture = ctx.createPattern(pic, "repeat"
 
);   //定義Pattern物件，設定填充圖案為pic圖片，填充形式為平鋪
 ctx.strokeStyle = redTexture;     //定義描邊樣式為上一行設定的Pattern描邊
 ctx.moveTo(80,10);
 ctx.lineTo(10,90);
 ctx.stroke();

預先載入圖片

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d"); 

    pic = new Image();   //建立圖片物件，或者 pic = document.createElement('img')
    pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg"; 
    pic.onload = patternFill;     //在圖片載入完成時執行繪圖函式

    function patternFill() {     //定義繪圖函式
        var redTexture = ctx.createPattern(pic, "repeat");   
        ctx.strokeStyle = redTexture; 
        ctx.moveTo(80,10);
        ctx.lineTo(10,90);
        ctx.lineWidth = 8;    //定義線段粗度為8畫素
        ctx.stroke();
    }

定義路徑，重新開始一條路徑

ctx.beginPath();

漸變gradient

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.moveTo(0,0);   
ctx.lineTo(150,50); 
ctx.lineTo(20,100); 

var grd = ctx.createLinearGradient(0,0,170,0);  //定義線性漸變物件，設定漸變線起始點和結束點座標，座標格式為(起始點x,起始點y,結束點x,結束點y)
grd.addColorStop(0,"black");   //定義漸變線起點顏色
grd.addColorStop(0.5,"red");   //定義漸變線中間點的顏色
grd.addColorStop(1,"yellow");  //定義漸變線結束點的顏色

ctx.strokeStyle = grd;   //將漸變物件賦值給strokeStyle
ctx.stroke();  //描邊

放射性漸變

      function draw() {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var gradient = context.createRadialGradient(
          canvas.width/2,canvas.height,10,
          canvas.width/2,0,100);

        gradient.addColorStop(0,'blue');
        gradient.addColorStop(0.25,'white');
        gradient.addColorStop(0.5,'purple');
        gradient.addColorStop(0.75,'red');
        gradient.addColorStop(1,'yellow');
        context.fillStyle=gradient;
        context.rect(0,0,canvas.width,canvas.height);
        context.fill();
      }

線段屬性

ctx.lineJoin

• bevel
• round
• miter

影象

drawImage

<img id="scream" src="a.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的瀏覽器不支援 HTML5 canvas 標籤。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

img.onload = function() {
    ctx.drawImage(img,10,10);
}
</script>

陰影

在canvas之中進行繪製時，不管要畫的是圖形、文字，還是影象，都可以通過修改繪圖環境中的如下4個屬性值來指定陰影效果：

• shadowColor：CSS3格式的顏色
• shadowOffsetX：從圖形或文字到陰影的水平畫素偏移
• shadowOffsetY：從圖形或文字到陰影的垂直畫素偏移
• shadowBlur：一個與畫素無關的值。該值被用於高斯模糊方程之中，以便對陰影進行模糊化處理。

繪製陰影還需要滿足條件：
1. 指定的shadowColor值不是全透明的
2. 在其餘的陰影屬性之中，存在一個非0的值。

示例：

      function draw() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.save();
        ctx.fillStyle = '#EB852A'; 
        ctx.shadowOffsetX = 15; // 陰影Y軸偏移
        ctx.shadowOffsetY = 15; // 陰影X軸偏移
        ctx.shadowBlur = 14; // 模糊尺寸
        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 顏色
        ctx.beginPath(); 
        ctx.arc(150, 150, 75, 0, 2 * Math.PI, false); 
        ctx.fill();
        ctx.restore();
        ctx.fillStyle = '#222222'; 
        ctx.beginPath(); 
        ctx.arc(350, 150, 75, 0, 2 * Math.PI, false); 
        ctx.fill();
      }

填充

矩形填充，使用fillRect()、strokeRect() 方法，會立即繪製。然而大部分Canvas繪圖環境中的方法都不是立即繪製的。
大多數繪圖系統，如Scalable Vector Graphics、Apple的Cocoa框架，以及Adobe Illustrator等，都是基於路徑的。使用這些繪製系統時，需要先定義一個路徑，然後再對其進行描邊或填充，也可以在描邊的同時進行填充。

填充路徑時，會使用“非零環繞規則”：對於路徑中的任意給定區域，從該區域內部畫一條足夠長的線段，使此線段終點完全落在路徑範圍之外，然後計數，線段每與路徑上的線相交，就改變計數器的值，順時針相交就加1，逆時針相交就減1.最終計數器值不是0，此區域就在路徑裡面，fill()就會對其填充。