創(chuàng)建 canvas 標(biāo)簽：
<canvas id="canvas" width="pice" height="pice" >
當(dāng)前瀏覽器不支持canvas。
</canvas>
*canvas 標(biāo)簽的寬高 必須在標(biāo)簽上定義稠通。
用js 獲取canvas畫(huà)布
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d"); ?
//它指定了二維繪圖衬衬，并且導(dǎo)致這個(gè)方法返回一個(gè)環(huán)境對(duì)象，該對(duì)象導(dǎo)出一個(gè)二維繪圖 API改橘。
設(shè)置路徑參數(shù)（線寬滋尉、路徑顏色\填充顏色）
ctx.lineWidth = 1;
ctx.strokeStyle = "#fff";
ctx.fillStyle = "#fff";
路徑設(shè)置
ctx.beginPath();//開(kāi)始一段新路徑
ctx.moveTo(x,y);//開(kāi)始點(diǎn)坐標(biāo)（左上角為原點(diǎn)，X軸向右為正方向飞主，y軸向下為正方向）
ctx.lineTo(x,y);//結(jié)束點(diǎn)坐標(biāo)
ctx.closePath();//該路徑結(jié)束
ctx.stroke();//描邊
ctx.fill();//路徑填充
ctx.strokeRect(x, y, width, height);//可直接使用此方法描邊出一個(gè)矩形
填充設(shè)置
ctx.fillStyle = "#fff";//填充顏色
ctx.strokeRect(x, y, width, height);//可直接使用此方法填充出一個(gè)矩形
ctx.clearRect(x, y, width, height);//清除矩形區(qū)域
