canvas（一） 基本线条绘制

var dom = document.getElementById('canvasItem'),
ctx = dom.getContext('2d'); //坐标位置默认基于 浏览器窗口(0,0),此时居中，基于 当前坐标系
//x轴 向右，y轴向下
ctx.beginPath();
ctx.moveTo(100,350); //只是将坐标移到某点
ctx.lineTo(500,350); //将两个点之间连接起来
ctx.lineTo(500,200);
ctx.lineTo(600,350); //基于状态绘制图像 此时，状态设置 ctx.moveTo(600,450);
ctx.lineTo(600,500);
ctx.lineWidth=10;
ctx.strokeStyle='red'; ctx.stroke(); /*绘制不同 属性的 线条，使用beginPath 重新开启一条全新的路径*/
ctx.beginPath();
//ctx.moveTo(100,520);
ctx.lineTo(100,520); //使用lineTo 相当于 moveTo,当使用了beginPath
ctx.lineTo(600,520);
ctx.lineWidth=3;
ctx.strokeStyle='blue';
ctx.stroke(); ctx.beginPath(); ctx.moveTo(100,560);
ctx.lineTo(600,560);
ctx.lineWidth=30;
ctx.strokeStyle='yellow'; ctx.stroke(); //绘制