HTML5 canvas

最近要用做网页动画，纠结于使用canvas还是CSS3。。。反正先做笔记总没有错啦～

<canvas id="canvas" width="150" height="150"></canvas>

  var cvs = document.getElementById("pageflip-canvas");
  var ctx = cvs.getContext("2d");

矩形 Rectangles

方法：

fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

这三个函数的效果会立刻在 canvas 上反映出来。

绘制路径 Drawing paths

步骤：

beginPath()
closePath()
stroke() or fill() 注意：当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath 。

方法：

moveTo(x, y)：移动画笔到(x,y)

lineTo(x, y)：从当前点，画先到(x,y)

arc(x, y, radius, startAngle, endAngle, anticlockwise)：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。

quadraticCurveTo(cp1x, cp1y, x, y) //二次方程曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)//贝塞尔

rect(x, y, width, height)：除了上面提到的三个方法可以直接绘制矩形之外，我们还有一个 rect 方法是用于绘制矩形路径的。

应用图像 Using images

var img = new Image();   // Create new Image object  
img.onload = function(){  
  ctx.drawImage(img, 0, 0, 830, 520, 0, 0, 830, 520);// execute drawImage statements here  
}  
img.src = 'myImage.png'; // Set source path

方法：

drawImage(image, dx, dy)：image 是 image 或者 canvas 对象，dx 和 dy 是其在目标 canvas 里的起始坐标。

drawImage(image, dx, dy, dwidth, dheight)：width 和 height 分别是图像在 canvas 中显示大小。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：sx和sy是原图的框起点坐标，sWidth和sHeight是原图上的框大小。

色彩 Colors

fillStyle = color
strokeStyle = color

透明度 Transparency

globalAlpha = transparency value

线型 Line styles

lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value

渐变 Gradients

createLinearGradient(x1,y1,x2,y2)：表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1,y1,r1,x2,y2,r2)：前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

addColorStop(position, color)：创建出 canvasGradient 对象后给它上色，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。color 参数必须是一个有效的 CSS 颜色值。

  var lineargradient = ctx.createLinearGradient(0,0,cvs.width, cvs.height);
  lineargradient.addColorStop(0,'white');
  lineargradient.addColorStop(0.5,'black');
  ctx.fillStyle = lineargradient;
  ctx.fillRect(0,0,cvs.width, cvs.height);

图案 Patterns

createPattern(image,type)：Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。

阴影 Shadows

shadowOffsetX = float
shadowOffsetY = float，设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。
shadowBlur = float，用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = color，用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。

The canvas state，canvas状态

维护绘图状态栈。绘制状态由下列构成：

1) transformation矩阵。2)clipping region剪切区域。3)下列属性值：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.

Note: The current path and the current bitmap are not part of the drawing state. The current path is persistent, and can only be reset using the beginPath() method. The current bitmap is a property of the canvas, not the context.注意：当前的path和bitmap不属于绘图状态。当前path是一直存在的，只有使用beginPath()方法重置。当前bitmap是canvas的属性，而不是内容。

context . save()：Pushes the current state onto the stack.The method must push a copy of the current drawing state onto the drawing state stack.将绘图状态压栈。
context . restore()：Pops the top state on the stack, restoring the context to that state.method must pop the top entry in the drawing state stack, and reset the drawing state it describes. If there is no saved state, the method must do nothing.弹出最新的绘图状态。

通常是和transformation结合使用，因为transformation的方法会修改画布context的绘制坐标。
context.save();
context.setTransform(1, 0, 0, 1, 0, 0);
context.translate(x + width / 2, y + height / 2);
context.fillRect(0,0,36,36);
context.restore();
context.fillRect(0,0,36,36);

Transformations变换矩阵

变换矩阵用于创建sharp和paths。使用时必须考虑所绘制图形的原点。

context . translate(x, y)，Changes the transformation matrix to apply a translation transformation with the given characteristics.用来移动 canvas 和它的原点到一个不同的位置。

context . rotate(angle)，Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.Canvas旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

context . scale(x, y)，Changes the transformation matrix to apply a scaling transformation with the given characteristics.方法接受两个参数。x,y 分别是横轴和纵轴的放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

context . transform(a, b, c, d, e, f)，Changes the transformation matrix to apply the matrix given by the arguments as described below.
context . setTransform(a, b, c, d, e, f)，Changes the transformation matrix to the matrix given by the arguments as described below.

修改context的坐标系。

http://blog.csdn.net/sadfishsc/article/details/7175007