canvas學習筆記（一）

 canvas是HTML5的新元素之一。使用canvas可以直接在HTML上進行圖形操作，所以它具有極大的應用價值。canvas元素本身不具有繪圖能力，它需要藉助JavaScript來實現繪圖功能。

canvas的限制：

• canvas繪製的圖形是靜態的，如果要讓所畫的圖形動起來，則需要畫出每一幀的圖形。
• 在使用canvas時，需要考慮用戶的瀏覽器和使用環境。
• canvas目前只是一張二維畫布，要想實現三維效果，需要藉助第三方類庫，如three.js或者Papervision3D等。

使用canvas，只需要在HTML5中添加canvas元素即可：

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

通過id獲取canvas元素：

1 var canvas = document.getElementById("myCanvas");

獲取CanvasRenderingContext2D對象（繪圖對象）：

1 var context = canvas.getContext("2d");

設置線條寬度：

1 context.lineWidth = 10;

設置線條顏色：

1 context.strokeStyle = "red";
2 context.strokeStyle = "#ff0000";
3 context.strokeStyle = "rgb(0,0,0)";

設置線帽樣式：

1 context.lineCap = 'butt';
2 context.lineCap = 'round';
3 context.lineCap = 'square';

 設置填充顏色：

1 context.fillStyle = "red";
2 context.fillStyle = "#ff0000";
3 context.fillStyle = "rgb(0,0,0)";

創建一個新的路徑：

1 context.beginPath();

設置路徑的起始點：

context.moveTo(x, y);

移動畫筆至某坐標（產生路徑）：

context.lineTo(x, y);

繪製路徑：

context.stroke();

繪製矩形：

context.strokeRect(x, y, w, h);
// x,y 左上頂點坐標
// w 矩形寬度
// h 矩形長度

context.rect(x, y, w, h); //功能與context.strokeRect相同

繪製實心矩形：

1 context.fillRect(x, y, w, h);

畫圓：

1 context.arc(x, y, r, b, e, bool);
2 // x,y 圓心坐標
3 // r 半徑
4 // b 起始弧度
5 // e 終止弧度
6 // bool 是否逆時針繪製

註意：第4、5個參數傳入的是圓弧的弧度，如果要畫30度的角，則需將其轉化為弧度：30*Math.PI/180。

畫圓弧：

context.arcTo(P1x, P1y, p2x, p2y, r)
// 當前點：P
// 所繪製的圓弧與線段PP1、PP2相切
// 圓弧半徑為： r

擦除canvas：

1 canvas.clearRect(x, y, w, h);