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)
旋转rotate(deg)
缩放scale(sx,sy)
save()
restore()
transform(a,b,c,d,e,f)
setTransform()
线性渐变
fillStyle__填充样式（样式是多种多样的）；
var linearGrad =context.createLinearGradient(Xstar,Ystar,Xend,Yend);
创建线性渐变（起始位置X，Y，结束位置X，Y）；
grd.addColorStop(stop,color);
stop是（开始填充）位置(0.0~1.0的数值)，color是要填充的颜色；这个.addColorStop()至少要2个；
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) 最后一个参数为是否逆时针
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() 水平对齐
textBaseline() 垂直对齐
阴影
shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur
剪辑
clip()
剪纸效果
非零环绕原则判断里外
其他
global:globalAlpha,globalCompositeOperation
clearRect()
获取鼠标相对于canvas画布的位置
var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;