创建 canvas 标签：
<canvas id="canvas" width="pice" height="pice" >
当前浏览器不支持canvas。
</canvas>
*canvas 标签的宽高 必须在标签上定义。
用js 获取canvas画布
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
//它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
设置路径参数（线宽、路径颜色\填充颜色）
ctx.lineWidth = 1;
ctx.strokeStyle = "#fff";
ctx.fillStyle = "#fff";
路径设置
ctx.beginPath();//开始一段新路径
ctx.moveTo(x,y);//开始点坐标（左上角为原点，X轴向右为正方向，y轴向下为正方向）
ctx.lineTo(x,y);//结束点坐标
ctx.closePath();//该路径结束
ctx.stroke();//描边
ctx.fill();//路径填充
ctx.strokeRect(x, y, width, height);//可直接使用此方法描边出一个矩形
填充设置
ctx.fillStyle = "#fff";//填充颜色
ctx.strokeRect(x, y, width, height);//可直接使用此方法填充出一个矩形
ctx.clearRect(x, y, width, height);//清除矩形区域
