一、绘制矩形：
1.context.rect(x,y,width,height);
2.context.fillRect(x,y,width,height);
3.context.strokeRect(x,y,width,height);
4.context.clearRect(x,y,width,height);
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
二、绘制路径：
1.context.fill();//如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。
2.context.stroke();//实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
3.contet.beginPath();//beginPath() 方法开始一条路径，或重置当前的路径。用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。用 stroke() 方法在画布上绘制确切的路径。
4.moveTo(x,y)
5To(x,y)
6.closePath();//创建从当前点到开始点的路径。
7.context.clip();//clip() 方法从原始画布中剪切任意形状和尺寸。
8.context.quadraticCurveTo(cpx,cpy,x,y);//创建二次贝塞尔曲线
9.context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);//创建三次方贝塞尔曲线
10.context.arc(x,y,r,sAngle,eAngle,counterclockwise);//arc() 方法创建弧/曲线（用于创建圆或部分圆）。 counterclockwise:False = 顺时针，true = 逆时针。默认顺时针。
- 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角：arc(100,75,50,0,1.5*Math.PI)
- 结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
11.context.arcTo(x1,y1,x2,y2,r);//arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。(w3c有误，x1,y1应为控制点坐标)
12.context.isPointInPath(x,y);//方法返回 true，如果指定的点位于当前路径中；否则返回 false。.line