H5 canvas(线段，矩形，弧线 及 圆 的 绘制)

创建 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);//清除矩形区域

弧线的绘制

圆的绘制