HTML5(四) colorful world
HTML5(四) colorful world
1. basic color
stokeStyle is for line
fillStyle is for area

statement bellows are the same color.
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

sample for 36 circles, test4.html:
<canvas id="canvas1" width="150" height="150" style=" background-color: black">
you are out!
</canvas>
<br/>
<input type="button" value="fillStyle" onclick="fillStyle();" />
<input type="button" value="strokeStyle" onclick="strokeStyle();" />

<script type="text/javascript">
    function fillStyle() {
        var canvas = document.getElementById("canvas1");
        var ctx = canvas.getContext("2d");
        //clear the canvas
        ctx.clearRect(0,0,150,150);
       
        for (var i=0;i<6;i++){
            for (var j=0;j<6;j++){
                //set color values
                ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
                //begin paint
                ctx.beginPath();
                //draw circle and i,j for the center of the circle
                ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
                ctx.fill();
            }
        }
    }

    function strokeStyle() {
        var canvas = document.getElementById("canvas1");
        var ctx = canvas.getContext("2d");
       
        ctx.clearRect(0,0,150,150);
        for (var i=0;i<6;i++){
            for (var j=0;j<6;j++){
                ctx.strokeStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
                ctx.beginPath();
                ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
                ctx.stroke()
            }
        }
    }
</script>


2.Transparency

sample codes in file test4-1.html:
<canvas id="canvas2" width="150" height="150" style="background-position: center center;background-image:url(banner1.gif)">
    you are out!
</canvas>
<br />
Transparency<br />
<input type="button" value="