细说 Canvas API（一）
Canvas API：可以动态生成和展示图形、图表、图像以及动画。不需要将所绘制图像中的每个图元当作对象存储，因此执行性能非常好。在页面中加入了 canvas 元素后，我们便可以通过 JavaScript 来自由地控制它。
Canvas 本质上是一个位图画布，其上绘制的图形都是不可缩放的，不能像 SVG 图像那样可以被放大缩小；此外，用 Canvas 绘制出来的对象不属于页面 DOM 结构或任何命名空间；SVG 图像却可以在不同的分辨率下流畅的播放，并且支持单击检测。
如果你的图像需要显著的交互行为，那么可以考虑使用 SVG 代替 Canvas API。SVG 也能用于绘制，而且它整合了浏览器的 DOM。
介绍完了，下面开始我们的愉（黑）快（暗）的学习之路吧==
一、路径
HTML5 Canvas API 中的路径代表你希望呈现的任何形状。
按照惯例，不论开始绘制何种图形，第一个需要调用的就是 beginPath，这个简单的函数不带任何参数，它用来通知 Canvas 将要开始绘制一个新的图形了。对于 Canvas 来说，beginPath 函数最大的用处就是 Canvas 需要据此来计算图形的内部和外部范围，以便完成后续的描边和填充。
context 路径函数:
| moveTo(x,y) | 不绘制，只是将当前位置移动到新的目标坐标(x,y) |
|---|---|
| lineTo(x,y) | 不仅将当前位置移到新的目标坐标(x,y)，而且在两个坐标之间画一条直线。 |
| closePath() | 会将路径的起始坐标自动作为目标坐标。 |
context 属性：
| linejoin | 修改当前形状中线段的连接方式，值可以为 round,bevel 或 miter. |
|---|---|
| lineWidth | 线宽 |
| StrokeStyle | 改变线条颜色 |
| lineCap | 指定线条末端的样式，值可以为 butt,square 或者 round |
| fillStyle | 填充颜色 |
绘制矩形区域的函数：
| rect(x,y w,h) | 创建矩形 |
|---|---|
| fillRect(x,y,w,h) | x,y 是矩形左上角的坐标，w,h 为宽度和高度。(填色，默认为黑色) |
| strokeRect(x,y w,h) | x,y 是矩形左上角的坐标，w,h 为宽度和高度。（无填色） |
| clearRect(x,y w,h) | 清除矩形区域内的所有内容并将它恢复到初始状态，即透明色 |
二、绘制曲线
Canvas 提供了一系列绘制曲线的函数。
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
|---|---|
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
三、在 Canvas 中插入图片
图片增加了 canvas 操作的复杂度，必须等到图片完全加载后才能对其进行操作。即开发时，要注意，在呈现之前，应确保图片已经加载完毕。
相关函数：drawImage(img,x,y,width,height);
四、渐变
渐变是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。
使用渐变有 3 个步骤：
（1）创建渐变对象；
（2）为渐变对象设置颜色，指明过渡方式；
（3）在 context 上为填充样式或者描边样式设置渐变。
可以将渐变看作是颜色沿着一条线进行缓慢的变化。
要设置显示哪种颜色，在渐变对象上使用 addColorStop 函数即可。这个函数允许指定两个参数：颜色和偏移量。颜色即渐变的颜色，偏移量是一个 0.0 到 1.0 之间的数值，代表沿着渐变线渐变的距离有多远。
HTML5 Canvas API 还支持 放射性渐变，所谓放射性渐变是指颜色会介于两个指定圆间的锥形区域平滑变化。
相关函数：createRadialGradient(x0,y0,r0,x,y,r)
五、背景图
相关函数：createPattern(image,x)
第二个参数为重复性参数：
| 平铺方式 | 意义 |
|---|---|
| repeat | (默认值)图片会在两个方向平铺 |
| repeat-x | 横向平铺 |
| repeat-y | 纵向平铺 |
| no-repeat | 图片只显示一次，不平铺 |
六、缩放 Canvas 对象
scale() 函数带有两个参数来分别代表在 x,y 两个维度的值。每个参数在 canvas 显示图像的时候，向其传递在本方向轴上图像要 放大（或者缩小）的量。
注意：缩放 (scale) 和旋转（rotate）等变换操作都是针对原点进行的。如果对一个不在原点的图形进行旋转变换，那么 rotate 变换函数将图形绕着原点旋转而不是在原地旋转。
七、Canvas 变换
（1）context.rotate(angle) 来旋转图像，甚至可以直接修改底层变换矩阵以完成一些高级操作，如剪裁图像的绘制路径。
（2）canvas.transform()
画布上的每个对象都拥有一个当前的变换矩阵（具体如何获取？？有待探索）。transform() 方法替换当前的矩阵来操作当前的变换矩阵：
context.transform(a,b,c,d,e,f);
a c e
b d f
0 0 1
即 transform() 允许您缩放、旋转、移动并倾斜当前的环境。
注意: 该变换只会影响 transform() 方法调用之后的绘图。
| a | 水平缩放绘图 |
|---|---|
| b | 水平倾斜绘图 |
| c | 垂直倾斜绘图 |
| d | 垂直缩放绘图 |
| e | 水平移动绘图 |
| f | 垂直移动绘图 |
