canvas学习笔记二
应用风格和颜色
如果想要给图形上色，有两种属性可以做到：fillStyle和strokeStyle
fillStyle = color // 用于设置填充的颜色
strokeStyle = color // 用于设置轮廓的颜色
color可以表示CSS颜色值的字符串，渐变对象或者图案对象。
透明度Transparency
通过设置globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式
globalAlpha = transparency value
这个属性影响到canvas里所有图形的透明度，有效的值范围是0.0 到 1.0
globalAlpha属性在需要绘制大量拥有相同透明度的图形时候相当高效，因为strokeStyle和fillStyle属性接受符合CSS3规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
说明：rgba与rgb方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从0.0到1.0
线形Line styles
- lineWidth = value; // 设置当前绘线的粗细，属性值必须为正数。默认值为1.0
- lineCap = type; // 指定了线段端点显示的样子，可以是下面三种之一：butt（默认），round和square
- lineJoin = type; // 指定了图形中两线段连接处所显示的样子：round，bevel和miter（默认）
- miterLimit = value;
round是圆弧，bevel是垂直于角平分线的截边，miter是两条线的外侧边也会交于一点，不过这可以通过miterLimit来设置，因为当夹角减少时，交点距离会呈指数级增大。使用了miterLimit后连接效果会变成bevel。
线宽是指给定路径的中心到两边的粗细，也就是说在路径的两边各绘制线宽的一半。 若想要奇数宽度的线没有虚边，需要在精确的位置上设置，例如在（5.5，5）位置，宽度两边各为0.5后刚好延伸到整数像素的边缘，就不会出现虚边了
渐变Gradients
我们使用下面的方法新建一个canvasGradient对象，可以将它赋给图形的fillStyle或strokeStyle属性。
createLinearGradient(x1,y1,x2,y2)// 它接受四个参数，表示渐变的起点（x1，y1）与终点（x2，y2）
createRadialGradient(x1,y1,r,x2,y2,r2) //它接受6个参数的，前三个定义以(x1,y1)为原点，半径为r1的圆，后三个参数则定义另一个以（x2,y2）为原点，半径为r2的圆。
创建出canvasGradient对象后，我们就可以用addColorStop方法给它上色了
addColorStop(position,color)//position是指在哪个位置使用某种颜色(0.0-1.0)
例如：
var linear = ctx.createLinearGradient(0,0,50,50);
linear.addColorStop(0,"white");
ctx.fillStyle = linear; //注意：fillStyle和strokeStyle都可以接受canvasGradient对象
图案Patterns
实现图案更新简单的方法createPattern(image,type)
其中:
image可以是一个Image对象的引用，或者另一个canvas对象
type必须是下面字符串值之一：repeat,repeat-x,repeat-y和no-repeat。
图案的应用跟渐变很类似，创建出一个pattern之后，赋给fillStyle或strokeStyle属性即可。
注意：与drawImage有点不同，你需要确认image对象已经装载完毕，否则图案可能效果不对。
阴影shadows
四个属性
-
- shadowOffsetX = float;//设定阴影在X轴的延伸距离，不受变换矩阵影响
- shadowOffsetY = float;//设定阴影在Y轴的延伸距离，不受变换矩阵影响
- shadowBlur = float;//用于设定阴影的模糊程度，不受变换矩阵影响
- shadowColor = color;//用于设定阴影效果的延伸，值可以是标准的CSS颜色值
变型
先介绍下常用的save和restore方法
这两个方法是用来保存和恢复canvas状态的，都没有参数。canvas状态就是当前画面应用的所有样式和变形的一个快照。 canvas状态以堆的方式保存，每一次调用save方法，当前的状态就会被推入堆中保存起来。这种状态包括：
- 当前应用的变形
- 当前的裁切路径
移动Translating
它用来移动canvas和它的原点到一个不同的位置。 translate(x,y);
旋转rotating
它用于以原点为中心旋转canvas rotate(angle) 这个方法只接受一个参数：旋转的角度，它是顺时针方向的，以弧度为单位的值
缩放Scaling
我们用它来增减图形在canvas中的像素数目，对形状，位图进行缩小或者放大。 scale(x,y) x,y分别是横轴和纵轴的缩放因子，它们都必须是正值，值比1.0小表示缩小，比1.0大则表示放大
变形Transforms
允许直接对变形矩阵作修改 transform( m11 , m12 , m21 , m22 , dx , dy ); 这个方法必须将当前的变形矩阵乘上下面的矩阵
m11 m21 dx
m12 m22 dy
0 0 1
如果任意一个参数是无限大，变形矩阵也必须被标记为无限大，否则会抛出异常。
setTransform( m11 , m12 , m21 , m22 , dx , dy )
这个方法必须重置当前的变形矩阵为单位矩阵，然后以相同的参数调用transform方法，如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会出现异常。
组合
compositing
之前的例子里面，我们总是将一个图形画在另一个之上，大多数情况下，这样是不够的。比如说，它这样受制于图形的绘制顺序。不过，我们可以利用globalCompositeOperation属性来改变这些做法。
globalCompositeOperation
我们不仅可以在已有图形后面再画新图形，还可以用来遮盖，清除某些区域。
globalCompositeOperation = type 其中type是下面字符串值之一：
-
- source-over (default)//新图形会绘制在原有内容之上
- destination-over //会在原有的内容之下绘制新图形
- source-in //新图形仅仅出现与原有内容重叠的部分，其它区域都变透明的
- destination-in //原有内容中与新图形重叠的部分会被保留，其它区域都变透明的
- source-atop //新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上
- destination-atop //原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
- lighter //两图形中重叠部分作加色处理
- darker //两图形中重叠的部分作减色处理
- xor //重叠的部分会变成透明
- copy //只有新图形会被保留，其它都被清除掉
裁切路径 Clipping paths
clip() //我们使用clip方法来创建一个新裁切路径。
默认情况下canvas有一个与自身一样大的裁切路径。 我们在画完路径后，直接调用ctx.clip(),那么之前画的路径就变成裁切路径，只有路径包围的内容才会显示出来
基本动画
由于我们是用脚本去操控canvas对象，这样要实现一些交互动画也是相当容易的。只不过canvas从来都不是专门为动画而设计的，难免会有些限制。可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西进行重绘，这是相当费时的。
画一帧需要以下步骤：
- 清空canvas 除非接下来要画的内容会完全充满canvas，否则你需要清空所有。最简单的做法就是使用clearRect方法
- 保存canvas状态 如果你要改变一些会修改canvas状态的设置，又要在每画一帧之时都是原始状态的话，你需要行保存一下。
- 绘制动画图形 这一步才是重绘动画帧
- 恢复canvas状态
