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 制作动画
