1 什么是canvas
HTML5 中的元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。它被称为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。
2 了解canvas
2.1 基本绘制步骤
（1）创建画布
通过使用H5中的标签来新建一块画布，里面的需要指定一个id属性，width和height指定画布的宽度和大小。
画布本身不具备画图的功能，需要利用js实现，可以通过getElementById()来获取画布对象。
（2）准备画笔
画笔就是context对象，也是需要js获取。
（3）设置起点坐标
接下来需要设置上下文开始的绘制点，也就是“从哪里开始画”。
（4）绘制线条
有了起点，就可以通过lineTo()方法进行线条绘制，它是用于定义从“x,y”的位置绘制一条直线到起点或上一个线头点。
- 路径
（6）描边和填充
在canvas图形绘制中，路径设定线路，真正绘制线必须执行stroke()方法根据路径进行描边，还可以使用fill()方法进行图形的填充。
图 2.1.1 描边和填充
在canvas中还有一个相当于橡皮擦的方法，使用它可以清除矩形内绘制的内容。
图 2.1.2 清除矩形
2.2 绘制圆形
canvas中使用arc()方法来绘制弧形和圆形。
radius 表示半径长度, startAngle表示开始弧度 , endAngle 表示结束弧度, bAntiClockwise表示是否逆时针。
图 2.2.1 绘制弧形和圆形
2.3 绘制图片
canvas中的绘制图片其实就是把一幅图放在画布上。
图 2.3.1 绘制图片
2.4 绘制渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变：
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状,然后使用 createLinearGradient();
图 2.4.1 绘制渐变
3 总结
Canvas通过代码的方式进行绘图，虽然看似简单，但是想要画出更好，更精美的图像，还需要我们仔细斟酌，计划好每一步，才能发挥出其强大的功能。
END
主 编 | 张祯悦
责 编 | 冯 博
where2go 团队
