在开始画路径之前必须以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 |
线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。 |