应用风格和颜色

如果想要给图形上色，有两种属性可以做到：fillStyle和strokeStyle

 fillStyle = color  // 用于设置填充的颜色

 strokeStyle = color // 用于设置轮廓的颜色

color可以表示CSS颜色值的字符串，渐变对象或者图案对象。

透明度Transparency

 通过设置globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式

 globalAlpha = transparency value

 这个属性影响到canvas里所有图形的透明度，有效的值范围是0.0 到 1.0

globalAlpha属性在需要绘制大量拥有相同透明度的图形时候相当高效，因为strokeStyle和fillStyle属性接受符合CSS3规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。

 

 说明：rgba与rgb方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从0.0到1.0

线形Line styles

 

round是圆弧，bevel是垂直于角平分线的截边，miter是两条线的外侧边也会交于一点，不过这可以通过miterLimit来设置，因为当夹角减少时，交点距离会呈指数级增大。使用了miterLimit后连接效果会变成bevel。

线宽是指给定路径的中心到两边的粗细，也就是说在路径的两边各绘制线宽的一半。若想要奇数宽度的线没有虚边，需要在精确的位置上设置，例如在（5.5，5）位置，宽度两边各为0.5后刚好延伸到整数像素的边缘，就不会出现虚边了

渐变Gradients

 
我们使用下面的方法新建一个canvasGradient对象，可以将它赋给图形的fillStyle或strokeStyle属性。

 

创建出canvasGradient对象后，我们就可以用addColorStop方法给它上色了 

addColorStop(position,color)//position是指在哪个位置使用某种颜色(0.0-1.0)

 例如：

 

 

图案Patterns

 
实现图案更新简单的方法createPattern(image,type)

 其中:

image可以是一个Image对象的引用，或者另一个canvas对象

type必须是下面字符串值之一：repeat,repeat-x,repeat-y和no-repeat。

图案的应用跟渐变很类似，创建出一个pattern之后，赋给fillStyle或strokeStyle属性即可。

 注意：与drawImage有点不同，你需要确认image对象已经装载完毕，否则图案可能效果不对。

 
阴影shadows

 
四个属性

 

变型

先介绍下常用的save和restore方法

 这两个方法是用来保存和恢复canvas状态的，都没有参数。canvas状态就是当前画面应用的所有样式和变形的一个快照。canvas状态以堆的方式保存，每一次调用save方法，当前的状态就会被推入堆中保存起来。这种状态包括：

当前应用的变形

当前的裁切路径

 

移动Translating

 它用来移动canvas和它的原点到一个不同的位置。translate(x,y);

旋转rotating

 它用于以原点为中心旋转canvasrotate(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是下面字符串值之一：

 

 

裁切路径 Clipping paths

 clip() //我们使用clip方法来创建一个新裁切路径。

默认情况下canvas有一个与自身一样大的裁切路径。我们在画完路径后，直接调用ctx.clip(),那么之前画的路径就变成裁切路径，只有路径包围的内容才会显示出来

基本动画

 
由于我们是用脚本去操控canvas对象，这样要实现一些交互动画也是相当容易的。只不过canvas从来都不是专门为动画而设计的，难免会有些限制。可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西进行重绘，这是相当费时的。

 画一帧需要以下步骤：