Canvas样式讨论之fillStyle

Canvas样式讨论之fillStyle

fillStyle的赋值除了可以是color之外，还有可以有gradient、canvas 、img、video：

gradient

gradient分为线性渐变和径向渐变两种：

1. 线性渐变（Linear Gradient）
   线性渐变是定义在两点之间，定义线性渐变主要有两个步骤：
   Step1
   var grd = context.createLinearGradient( xstart ,ystart ,xend ,yend );
   传入两个坐标值构成一个线段，这个线段就是所谓的渐变线，渐变线用于定义渐变的方向和尺度。
   Step2
   grd.addColorStop ( stop ,color );
   每个ColorStop是渐变线上的关键色，其中stop是一个浮点值，决定了关键色的位置，color决定了关键色的颜色。addColorStop()可添加多个，stop值在0.0-1.0之间，最小值取0表示起始的位置，最大值取1表示终点的位置。
   当完成以上两步，这个grd就可以作为fillStyle传入状态属性里。

        var linearGrad = context.createLinearGradient(0,0,800,800);
        linearGrad.addColorStop(0.0,"#fff");
        linearGrad.addColorStop(0.25,"yellow");
        linearGrad.addColorStop(0.5,"green");
        linearGrad.addColorStop(0.75,"blue");
        linearGrad.addColorStop(1.0,"#000");
        context.fillStyle = linearGrad;
        context.fillRect(0,0,800,800);

2.径向渐变（Radial Gradient）
径向渐变指放射状渐变，是定义在两个同心圆的基础上的。定义径向渐变主要有两个步骤：
Step1
var grd = context.createRadialGradient ( x0 ,y0 ,r0 ,x1 ,y1 ,r1 ) ;
createRadialGradient()定义了两个圆环，前三个参数定义了第一个圆的原点坐标和半径，后三个参数定义了第二个圆的原点坐标和半径
Step2
grd.addColorStop ( stop ,color );

        var linearGrad = context.createRadialGradient(400,400,10,400,400,600);
        linearGrad.addColorStop(0.0,"#fff");
        ....
        linearGrad.addColorStop(1.0,"#000");
        context.fillStyle = linearGrad;
        context.fillRect(0,0,800,800);

使用图片、画布或者video

createPattern ( img ,repeat-style )
第一个参数除了可以是img外，还可以是canvas（将画布作为填充）或者video
第二个参数是重复样式，repeat-style可以去找四种值：no-repeat、repeat-x、repeat-y、repeat
使用图片：

        var img = new Image();
        img.src = "back.jpg";

        img.onload = function() {
            var pattern = context.createPattern(img,"repeat");
            context.fillStyle = pattern;
            context.fillRect(0,0,800,800);
        }

使用画布：
首先指定使用画布来填充canvas

        var backCanvas = createBackgroundCanvas();
        var pattern = context.createPattern(backCanvas,"repeat");
        context.fillStyle = pattern;
        context.fillRect(0,0,800,800);

createBackgroundCanvas()函数用于创建一个填充的画布

    function createBackgroundCanvas() {
        var backCanvas = document.createElement("canvas");
        backCanvas.width = 100;
        backCanvas.height = 100;
        var backCanvasContext = backCanvas.getContext("2d");
        drawStar(backCanvasContext,50,50,50,0);
        return backCanvas;
    }