canvans基本操作

1、绘制矩形函数：
rect(x,y,width,height)
fillRect(x,y,width,height)
strokeRect(x,y,width,height)
2、线条属性：
lineWidth()
lineCap = "butt"(round,square);
lineJoin = miter(bevel,round);
miterLimit = 10;(一旦miter的像素超过一定的像素限制，会显示为bevel)

3、图形转换：
context.translate(100,100);//原点位移
context.save();//保存图形状态
context.restore();//恢复图形状态

4、变换矩阵：
transform(a,b,c,d,e,f);ad 水平，垂直缩放，bc倾斜，ef平移
setTransform(a,b,c,d,e,f);恢复单元矩阵

5、填充样式：
fillStyle渐变色（线性）
var grd = context.createLinearGradient(xStart,ystart,xend,yend);
grd.addColorStop(stop，color);

6、径向渐变：
var grd = context.createRadialGradient(x0,y0,z0,x1,y1,z1);
grd.addColorStop(stop，color);

7、填充样式
createPattern
createPattern(img,repeat-style);
no-repeat:没有重复
repeat-x:横向填充
repeat-y:竖向填充
repeat:整个填充
createPattern(canvas,repeat-style);
createPattern（video,repeat-style）;