getContext('2d')
moveTo()
lineTo()
lineWidth()
strokeStyle()
stroke()
beginPath()
closePath()
fillStyle
fill()
rect(x,y,width,height)
fillRect()
strokeRect()
lineCap() butt,round,square
lineJoin() mite,bevel,round
miterLimit()
位移translate(x,y)
旋轉(zhuǎn)rotate(deg)
縮放scale(sx,sy)
save()
restore()
transform(a,b,c,d,e,f)
setTransform()
線性漸變
fillStyle__填充樣式（樣式是多種多樣的）；
var linearGrad =context.createLinearGradient(Xstar,Ystar,Xend,Yend);
創(chuàng)建線性漸變（起始位置X，Y，結(jié)束位置X，Y）；
grd.addColorStop(stop,color);
stop是（開始填充）位置(0.0~1.0的數(shù)值)，color是要填充的顏色；這個(gè).addColorStop()至少要2個(gè)；
context.fillStyle = linearGrad;
徑向漸變
var grd = context.createRadialGradient( x0, y0, r0, x1, y1, r1 );
grd.addColorStop( stop, color );
填充
createPattern(img,repeat-style);圖片填充
createPattern( canvas, repeat-style );畫布填充
createPattern( vedio, repeat-style );視頻背景填充
repeat-style:
- no-repeat
- repeat-x
- repeat-y
- repeat
曲線
arc(x,y,r,startAngle,endAngle,false) 最后一個(gè)參數(shù)為是否逆時(shí)針
arcTo(x1,y1,x2,y2,radius) (x0,y0),(x1,y1)和(x1,y1),(x2,y2)兩條線相切的圓弧
quadraticCurveTo(x1,y1,x2,y2) 二次貝賽爾曲線
bezierCurveTo(x1,y1,x2,y2,x3,y3)三次貝賽爾曲線
文字
context.font = "bold 40px Arial"
fillText(string,x,y,[maxlength])
strokeText()
textAlign() 水平對(duì)齊
textBaseline() 垂直對(duì)齊
陰影
shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur
剪輯
clip()
剪紙效果
非零環(huán)繞原則判斷里外
其他
global:globalAlpha,globalCompositeOperation
clearRect()
獲取鼠標(biāo)相對(duì)于canvas畫布的位置
var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;
