1、canvas.getContext():获取渲染上下文和绘画功能；
一、绘制矩形
2、ctx.fillRect（x,y,width,height）:绘制矩形；
3、ctx.strokeRect(x,y,width,height):绘制矩形边框；
4、ctx.clearRect（x,y,width,height）:清除矩形；
二、绘制路径
5、ctx.beginPath():新建路径开始命令；
6、ctx.closePath():路径闭合之后绘制命令重新回到上下文；
7、stroke（）：通过线条来绘制图形轮廓；
8、fill():填充路径内容途径生成实心图形；
三、移动笔触
moveTo（x,y）;
四、实线
lineTo(x,y):绘制一条从当前位置到x,y位置的实线；
五、圆弧
arc（x,y,radius,startAngle,endAngle,方向（默认顺时针））；
六、贝塞尔以及二次贝塞尔
quadraticCurveTo（cp1x，cp1y,x,y）:cp1x,cp1y是贝塞尔曲线的控制点，x，y是结束点；
二次贝塞尔： bezierCruveTo（cp1x,cp1y,cp2x,cp2y,x,y）多了两个控制点；
七、Path2D(不太详细)
八、颜色填充
fillStyle = color：设置图形的填充颜色;
strokeStyle = color:设置图形轮廓的颜色；
九、设置透明度
ctx.globalAlpha = （0~1）；
十、线型 line styles
1、lineWidth = width；设置线的宽度（注意：线的宽度是从宽度中心向两边各绘制宽度的一般，因此要准确落在边缘需要减半计算）；
2、 lineCap = type：设置线条末端样式，type有 butt,round,square,默认是butt，
3、 lineJoin，设置线条交接处样式，值 有round，bevel，miter；默认是miter；
4.miterLimit，设置外延交点和连接点的最大距离，超出最大距离则变成bevel；
5、setLineDash和setLineOffset设置虚线样式；
十一、渐变 Gradients
1、线性渐变 createLinearGradient（x1,y1,x2,y2）,参数规定起始位置和结束位置，即线性方向；
2、径向渐变 createRadialGradient（x1,y1,r1,x2,y2,r2）;
3、颜色值设定 addColorStop（position，color）；position是渐变位置（0~1），color是颜色；
注：gradient对象其实也是一种颜色，要用fillStyle引用；
十二、状态保存与恢复
save()和restore()；
十三、移动原点
translate（x）