1-canvas基础绘图

canvas也是html标签，所以直接使用即可，style设置画布颜色
canvas的宽高默认是300.150；如果想要自定义，可在dom上操作或通过js控制，不要通过css设置
js方法获取canvas画布
获取画笔（canvas上下文对象）
设置画笔颜色
设置画画形状（注意：canvas兼容到IE9，画布最大不要超过4000以内，因为不同浏览器范围不同，综合看来4000可）
整体代码如下：
效果如下：

2-canvas绘图

canvas是二维直角坐标系，XY轴；
横轴是X，纵轴是Y,（0,0）点在canvas画布左上角，X越往右又越大，Y越往下越大（这点和平时前端页面说的像素类似）;
canvas的基底是像素的宽高，X轴2像素，Y轴2像素，对应宽高为2像素为4的栅格，1像素是1个具备rgba的格子（宽高分别为1）

2-1、canvas矩形绘制方法：

清理矩形效果如下：

2-2、canvas路径绘制方法

开始建立路径：beginPath(),也有清理路径集合的功能
向路径集合中添加子路径(其中子路径形状有：直线，圆弧，切线圆弧，二次贝塞尔曲线，三次贝塞尔曲线，矩形): [ 起点; 形状; closePath() 可选,
moveTo(x,y); 形状; closePath() 可选,
moveTo(x,y); 形状; closePath() 可选, ]
显示路径：填充fill() ，描边stroke()

2-2-1、直线形状

单个直线形状+不closePath+描边：

单个直线形状+closePath+描边：

单个直线形状+填充（clothPath或不clothPath）:

多个直线形状+描边，每一个是否有moveTo,是否closePath,就有影响啦：

多个直线形状+填充，每个是否有moveTo,是否closePath,就有影响啦：

2-2-2、圆弧形状

单个圆弧，没有moveTo,默认弧度为0的地方开始

可以看出，起点默认是（600,400）：

多个圆弧，有无moveTo,就有影响啦：

2-2-3、切线圆弧

画了两条直线辅助线，可以看到切线圆弧效果：去除辅助线，只看切线圆弧：

2-2-4、二次贝塞尔曲线

画了两条直线辅助线，可以看到二次贝塞尔曲线效果：去除辅助线，只看二次贝塞尔曲线效果：

2-2-5、三次赛贝尔曲线

画了三条直线辅助线，可以看到三次贝塞尔曲线效果：去除辅助线，只看三次贝塞尔曲线效果：

2-2-6、矩形

总结：
1、路径是子路径的集合，一个上下文对象同时只有一个路径，想要绘制新的路径，就要把当前路径置空；beginPath()方法当前路径置空，也就是将路径恢复到默认状态，让之后绘制的路径不受以前路径的影响
2、子路径时一条只有一个起点的，连续不断的线；moveTo(x,y)是设置路径起点的方法，也是创建一条新的子路径的方法；路径里的第一条子路径可以无需设置起点，它的起点默认是子路径的一个点 3、closePath()封闭路径