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）;