var canvas = document.getElementById("canvas"); var cxt = canvas.getContext("2d");
canvas绘图接口：
矩形的绘制
cxt.rect(x, y, width, height)cxt.rect(x,y,width,height)
该方法只是创建一个矩形路径，并没有绘制。绘制要加上cxt.stroke()或者用cxt.fill()。或者直接用下列方法进行实际的绘制（下列方法不需规划路径，直接绘制）。
cxt.fillRect(x, y, width, height);
cxt.strokeRect(x, y, width, height);
还有一个与矩形有关的方法是
cxt.clearRect(x, y, width, height)//清空给定矩形内的指定像素。
这四个方法的四个参数分别指矩形左上角的x坐标，y坐标，矩形的宽，矩形的高。
线条的样式
cxt.lineCap = “butt|round|square”
第一个值是默认值，第二个值是在线条的每个末端添加圆形线帽。第三个值是在线条的每个末端添加方形线帽。效果如图。
图示效果是同等长度，lineWidth为50，lineCap参数分别为“butt”，“round”，“square”的显示效果。lineCap只能用于线段的开始处和结尾出，不能用于线段的连接处。
线条的连接
cxt.lineJoin="bevel|round|miter";
第一个值的意思是创建斜角，第二个值是创建圆角，第三个是默认值，创建尖角。效果如图：
当lineJoin的值为miter时，会收到属性miterLimit属性的影响。miterLimit属性设置或返回最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。（这个解释和慕课网的解释不一样，我自己测试看到的结果也不一样，所以看效果设置吧）
如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。miterLimit的默认值为10。