画布基本功能——绘制路径

在开始画路径之前必须以context.beginPath()表示要开始绘制路径，画完后调用context.stroke()把画好的渲染出来。绘制路径的方法有：（注：不做特殊说明的都是number类型）
**通用：

属性	描述
context.lineWidth = 10	设置线宽度
context.strokeStyle="color"	描边
context.fill()	填充，在这之前需要context.fillStyle="color"来申明填充的颜色

方法	描述
arc(x, y, 半径, 起始角度, 结束角度, 是否逆时针: boolen = false)	0度（0 * Math.PI才是0度）是在3点钟方向，角度没有加减之说，是绝对定位的，写在哪就画到哪
arcTo(x1, y1, x2, y2, r)	从上一个结束的点,经由(x1,y1),到(x2,y2)画一个半径为r的圆，这个要画个好看的图需要些计算,不像arc心算就可以
quadraticCurveTo(cx, cy, x, y)	以(cx,cy)为控制点，绘制一条从上一点到(x,y)的二次贝塞尔曲线
bezierCurveTo(clx, cly, c2x, c2y, x, y)	以(clx, cly)和(c2x, c2y)为控制点,绘制一条从上一点到(x,y)的三次贝塞尔曲线
lineTo(x, y)	绘制从上一点到(x,y)的直线
moveTo(x, y)	不绘制线条，把起点/鼠标移动到(x, y)，这是为了那些起点为上一次结束点的方法
rect(x, y, width, height)	这与fillRect、strokeRect不同在于这创建的是个路径而不是独立的图形

定义线段末端的形状：lineCap =

值	描述
butt	线段末端以方形结束
round	线段末端以圆形结束
square	线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。