Canvas 常用API总结

基础部分参见上篇，《Canvas常用语法详解》。
本文的详细参数和例子，参见《玩转html5 画图》：http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

1、绘制矩形 context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)

2、清除矩形区域 context.clearRect(x,y,width,height)

3、圆弧 context.arc(x,y,r,startAngle,endAngle,anticlockwise)

4、路径 context.beginPath()
context.closePath()

5、绘制线段 context.moveTo(x,y)
context.lineTo(x,y)

6、绘制贝塞尔曲线 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

7、线性渐变 var lg = context.createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色 lg = addColorStop(offset,color)

8、径向渐变 var rg = context.createRadialGradient(xStart,yStart,xEnd,yEnd,radiusEnd)
径向渐变颜色 rg.addColorStop(offset,color)

9、图形变形
平移 context.translate(x,y)
缩放 context.scale(x,y)
旋转 context.rotate(angle)

10、矩阵变换 context.transform(m11,m12,m21,m22,dx,dy)

11、图形组合 context.globalCompositeOperation = type
type :
source-over(默认)
destination-over
source-in
destination-in
source-out
destination-out
source-atop
destination-atop
lighter
xor
copy

12、给图形绘制阴影
context.shadowOffsetX
context.shadowOffsetY
context.shadowColor
context.shadowBlur

13、绘制图像
绘图：context.drawImage
图像平铺：context.createPattern(image,type)
图像裁剪：context.clip()
像素处理： var imagedata = context.getImageData(sx,sy,sw,sh)
设置像素颜色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

14、绘制文字
填充文字： context.fillText(text,x,y)
绘制文字轮廓：context.strokeText(text,x,y)

15、保存和恢复状态
保存：context.save()
恢复：context.restore()

16、保存文件 canvas.toDataURL(MIME)

17、结合setInterval 制作动画