Canvas填充樣式fillStyle

漸變色
線性漸變色：                         
var grd=context.createLinearGradient(xstart,ystart,xend,yend)
grd.addColorStop(stop,color)
-stop:決定位置
-color:顏色

    window.onload=function(){

        var canvas = document.getElementById("canvas");
        var context=canvas.getContext("2d");

        var grd=context.createLinearGradient(0,0,800,800)
        grd.addColorStop(0.0,"white")
        grd.addColorStop(1.0,"red")
        context.fillStyle=grd;
        context.fillRect(0,0,800,800)

    }

放射漸變色
var grd=context.createRadialGradient(x1,y1,r1,x2,y2,r2)
grd.addColorStop(stop,color)

    window.onload=function(){

        var canvas = document.getElementById("canvas");
        var context=canvas.getContext("2d");

        var grd=context.createRadialGradient(100,100,10,100,100,100)
        grd.addColorStop(0.0,"white")
        grd.addColorStop(1.0,"red")
        context.fillStyle=grd;
        context.fillRect(0,0,800,800)

    }

使用圖片、Canvas作爲樣式
createPattern(img/canvas/vedeo,repeat-style)
repeat-style（重複方式）可取值：
no-repeat
repeat-x
repeat-y
repeat

    window.onload=function(){

        var canvas = document.getElementById("canvas");
        var context=canvas.getContext("2d");

        var img = new Image();
        img.src="1126788942bffadbcal.jpg";
        img.onload=function() {
            var pattern = context.createPattern(img, "no-repeat");
            context.fillStyle=pattern;
            context.fillRect(0, 0, 800, 800)
        }
    }

   

window.onload=function(){

        var canvas = document.getElementById("canvas");
        var context=canvas.getContext("2d");

        var myCanvas = document.createElement("canvas");
        myCanvas.width=300;
        myCanvas.height=300;
        var myContent=myCanvas.getContext("2d");
       drawStar(myContent,100,100,50,0);

        var pattern = context.createPattern(myCanvas, "no-repeat");
        context.fillStyle=pattern;
        context.fillRect(0, 0, 800, 800)

    }