html5 之 canvas 相关知识(二)API-fillStyle

context.fillStyle=color|gradient|pattern;//指示绘图填充色的CSS颜色值|用于填充绘图的渐变对象线性或放射性|用于填充绘图的 pattern 对象

<canvas id="canvas" width=300 height=150></canvas>
<script>
    var myCanvas = document.getElementById("canvas");
    var cc = myCanvas.getContext("2d");
    cc.fillStyle = "#ff0000";
    cc.fillRect(100,25,100,100);//四个参数分别对应：x,y,w,h
</script>

<canvas id="canvas" width=300 height=150></canvas>

<script>
    var myCanvas = document.getElementById("canvas");
    var cc = myCanvas.getContext("2d");
    var myGradient=cc.createLinearGradient(0,0,0,170);
    myGradient.addColorStop(0,"#ff0000");
    myGradient.addColorStop(1,"#ffcc00");
    cc.fillStyle=myGradient;
    cc.fillRect(100,25,100,100);
</script>

context.createLinearGradient(x0,y0,x1,y1);//渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 y 坐标

<canvas id="canvas" width=300 height=150></canvas>
<script>
    var myCanvas = document.getElementById("canvas");
    var cc = myCanvas.getContext("2d");
    var myGradient=cc.createLinearGradient(100,0,200,0);
    myGradient.addColorStop(0,"black");
    myGradient.addColorStop(0.5,"red");
    myGradient.addColorStop(1,"white");
    cc.fillStyle=myGradient;
    cc.fillRect(100,25,100,100);
</script>

<p align="center"><img src="img/lamp.gif" id="lamp" alt=""></p>
<canvas id="canvas2" width=300 height=150></canvas>

<script>
    var img=document.getElementById("lamp");
    function drawImgRepat(){
        var c=document.getElementById("canvas2");
        var ctx=c.getContext("2d");        
        var pat=ctx.createPattern(img,"repeat");//repeat|repeat-x|repeat-y|no-repeat
        ctx.rect(0,0,128,96);
        ctx.fillStyle=pat;
        ctx.fill();
    }
    img.onload = drawImgRepat;
</script>