canvas的fillStyle

以下方法也适用于strokeStyle，但是一般不会给strokeStyle设置样式

1.线性渐变

• var lgrd = context.createLinearGradient(xstart,ystart,xend,yend);
• lgrd.addColorStop(stop,color);
• context.fillStyle = lgrd;

2.径向渐变

• var rgrd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);分别对应两个圆的圆心坐标和半径
• rgrd.addColorStop(stop,color);
• context.fillStyle = rgrd;

3.createPattern(img,repeat-style);

• img
  • js图片对象
  • canvas对象，这个canvas元素要以创建元素的形式创建

  • function createBackgroundCanvas(){
        var backCanvas = document.createElement("canvas");
        backCanvas.width = 100;
        backCanvas.height = 100;
        var backCanvasContext = backCanvas.getContext("2d");
        ...//绘制图形的操作
        return backCanvas;
    }

  • video——视频作为背景填充
• repeat-style
  • no-repeat
  • repeat-x
  • repeat-y
  • repeat