细说 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	垂直移动绘图