1、繪制矩形 context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
2、清除矩形區(qū)域 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)
旋轉(zhuǎn) 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坤次、保存和恢復狀態(tài)
保存:context.save()
恢復:context.restore()
16古劲、保存文件 canvas.toDataURL(MIME)
17、結合setInterval 制作動畫