Canvas小结（canvas方法）

createLinearGradient() 创建线性渐变，用在画布内容上

createLinearGradient()

    var c = document.getElementById('mycanvas');
    var ctx = c.getContext('2d');
    var grd = ctx.createLinearGradient(0,0,170,0);
    grd.addColorStop(0,"yellow");
    grd.addColorStop(1,"green");
    ctx.fillStyle = grd;
    ctx.fillRect(20,20,150,100);

createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 在指定方向上重复指定的元素

createPattern()

![](canvas-images/lamp.gif)
<canvas id="mycanvas2" width="300" height="200"></canvas>

    var c2=document.getElementById("mycanvas2");
    var ctx2=c2.getContext("2d");
    var img=document.getElementById("lamp");
    img.onload = function(){
        var pat=ctx2.createPattern(img,'repeat');
        ctx2.rect(10,10,150,100);   
        ctx2.fillStyle=pat;
        ctx2.fill();
    }

createRadialGradient()创建放射状/环形的渐变，用在画布内容上

createRadialGradient()

    var c3 = document.getElementById('mycanvas3');
    var ctx3 = c3.getContext('2d');
    //context.createRadialGradient(x0,y0,r0,x1,y1,r1);
    /*  x0  渐变的开始圆的 x 坐标
        y0  渐变的开始圆的 y 坐标
        r0  开始圆的半径
        x1  渐变的结束圆的 x 坐标
        y1  渐变的结束圆的 y 坐标
        r1  结束圆的半径*/
    var grd3 = ctx3.createRadialGradient(85,60,5,90,80,120);
    grd3.addColorStop(0,"red");
    grd3.addColorStop(1,"white");
    ctx3.fillStyle=grd3;
    ctx3.fillRect(10,10,170,120);

addColorStop() 规定渐变对象中的颜色和停止位置

addColorStop()

    var c4 = document.getElementById('mycanvas4');
    var ctx4 = c4.getContext('2d');
    var grd4 = ctx4.createLinearGradient(0,0,170,0);
    //gradient.addColorStop(stop,color);
    //stop  介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
    //color 在结束位置显示的 CSS 颜色值
    grd4.addColorStop(0,"red");
    grd4.addColorStop(1,"white");
    ctx4.fillStyle = grd4;
    ctx4.fillRect(10,10,180,100)