前言

接觸svg一段時間了。慢慢的覺得還是要學習一下canvas（其實是看粒子效果都是canvas，svg上加canvas實現粒子效果，所以沒辦法懶了）網上的教程不少還是按個人習慣記錄一下。

Canvas

建立
canvas需要建立後再獲取才能使用

html:(標準)

<canvas></canvas>

d3:（個人習慣）

var canvas_js = document.getElementById('js');
var canvas_d3 = d3.selectAll("#ceshi"
 
).append("canvas");

關於d3

d3.js v4版本支援canvas。目前還在使用v3版本。所以此處用於記錄其中的各種問題。

上述的d3建立canvas。canvas_d3為d3封裝的物件。使用過d3的應該習以為常的使用下列語法，但是canvas中需要注意是不可取的。因為d3_v3不支援canvas~~~

//建立
var canvas_d3 = d3.selectAll("#ceshi").append("canvas");
canvas_d3.width = 200;//報錯哦。
//個人解決辦法
//1.單個屬性
canvas_d3[0
 
][0].width = 200;
//2.一勞永逸 
var canvas_d3 = >d3.selectAll("#ceshi").append("canvas")[0][0];
canvas_d3.width = 200;

基本API

width( ) && height( )

設定寬高

getContext( )

獲取畫布。專業點的說法就是渲染上下文，通過使用 document.getElementById() 方法來為 元素得到DOM物件。一旦有了元素物件，你可以通過使用它的getContext() 方法來訪問繪畫上下文。

//js
var canvasjs = document.getElementById('js');
canvasjs.getContext('2d');
//d3
var canvasd3 = d3.selectAll("body").append("canvas")[0][0];
canvasd3.getContext("2d");

引數:
‘2d’ ：初學嘛。只好2D渲染了。

柵格

畫布柵格（canvas grid）太專業了。。。空間座標和d3一致，預設左上角為原點。

繪製基本圖形

矩形
canvas預設支援的圖形只有矩形，並提供三種繪製矩形API。

fillRect(x,y,width,height)：填充
strokeRect(x,y,width,height)邊框

需要注意的是：邊框線預設寬度2px;且向邊外擴充1px;就是說我在（20，20）處畫了一個80*80的邊框矩形，但是實際顯示區域是（19，19）處起線寬2px，內部79*79的矩形。

clearRect(x,y,width,height)清除
程式碼
//ctx_js
//繪製填充矩形
ctx_js.fillRect(20, 20, 80, 80);
//繪製矩形的邊框
ctx_js.strokeRect(120, 20, 80, 80);
//清除一個矩形區域
ctx_js.clearRect(70, 20, 80, 80);
//
//ctx_d3
//繪製填充矩形
ctx_d3.fillRect(20, 20, 80, 80);
//繪製矩形的邊框
ctx_d3.strokeRect(120, 20, 80, 80);
//清除一個矩形區域
ctx_d3.clearRect(70, 20, 80, 80);
語法基本一致了，之後就不做區別了

繪製路徑

基本步驟

beginPath():建立起點
畫圖命令畫出路徑
closePath:封閉路徑，組合圖形時，多個獨立路徑一定要閉合後再繪製新的路徑，或者在路徑命令中閉合
fill()或stroke()：路徑生成後，可以通過描邊（stroke）或者填充（fill）來渲染圖形

畫圖命令

**線**lineTo(x,y);
**圓**arc(x,y,radius,startAngle,endAngle,anticlockwise);
**貝塞爾曲線**quadraticCurveTo(cp1x,cp1y,x,y);

Path2D()
路徑物件