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="0" onclick="alphaTest1(0);" />
<input type="button" value="0.2" onclick="alphaTest1(0.2);" />
<input type="button" value="0.4" onclick="alphaTest1(0.4);" />
<input type="button" value="0.6" onclick="alphaTest1(0.6);" />
<input type="button" value="0.8" onclick="alphaTest1(0.8);" />
<input type="button" value="1" onclick="alphaTest1(1);" />

<script type="text/javascript">
    function alphaTest1(alpah) {
        var canvas = document.getElementById("canvas2");
        var ctx = canvas.getContext("2d");
       
        ctx.clearRect(0,0,150,150);
       
        ctx.fillStyle="rgba(0,0,255,"+alpah+")"
        ctx.fillRect(20, 20, 110, 110)
    }
</script>

There is a property named globalAlpha, it is the controller of global alpha value.
my example file test4-2.html:
<canvas  id="canvas3" width="150" height="150" style="background-position: center center;background-image:url(banner2.gif)">
    you are out!
</canvas><br/>
globalalpha：
<input type="button" value="0" onclick="alphaTest2(0);" />
<input type="button" value="0.2" onclick="alphaTest2(0.2);" />
<input type="button" value="0.4" onclick="alphaTest2(0.4);" />
<input type="button" value="0.6" onclick="alphaTest2(0.6);" />
<input type="button" value="0.8" onclick="alphaTest2(0.8);" />
<input type="button" value="1" onclick="alphaTest2(1);" />

<script type="text/javascript">
    function alphaTest2(alpah){
        var canvas = document.getElementById("canvas3");
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,150,150);
        //set globalalpha value
        ctx.globalAlpha=alpah
       
        ctx.fillStyle="red"
        ctx.fillRect(10, 10, 30, 30)
        ctx.fillStyle="green"
        ctx.fillRect(10, 50, 30, 30)
        ctx.fillStyle="blue"
        ctx.fillRect(10, 90, 30, 30)
        ctx.fillStyle="yellow"
        ctx.beginPath()
        ctx.arc(100, 75, 40, 0, 360)
        ctx.fill()
    }
</script>

3.gradients
we have 2 methods to create a object named canvasGradient.
one method: createLinearGradient(x1,y1,x2,y2)
       (x1,y1) begin point
                   (x2,y2) end point

createRadialGradient(x1,y1,r1,x2,y2,r2)
(x1,y1) r1 first circle
(x2,y2) r2 second circle

addColorStop(position,color)
position between 0.0 to 1.0

my test file test4-3.html:
<canvas  id="canvas4" width="150" height="150" style=" background-color: black">
    you are out!
</canvas>
<br/>
gradient：
<input type="button" value="horizontal" onclick="gradients1();" />
<input type="button" value="vertical" onclick="gradients2();" />
<input type="button" value="bias" onclick="gradients3();" />
<input type="button" value="mutation" onclick="gradients4();" />
<input type="button" value="CircleOne" onclick="gradients5();" />
<input type="button" value="CircleTwo" onclick="gradients6();" />

<script type="text/javascript">
    function gradients1() {
        var ctx = document.getElementById('canvas4').getContext('2d');
        ctx.clearRect(0,0,150,150);
        //create line gradient object
        var lingrad = ctx.createLinearGradient(0,0,150,0);
        //add color
        lingrad.addColorStop(0, 'blue');
        lingrad.addColorStop(0.5, 'green');
        lingrad.addColorStop(1, 'white');
        ctx.fillStyle = lingrad;
        ctx.fillRect(10,10,130,130);
    }
    function gradients2() {
        var ctx = document.getElementById('canvas4').getContext('2d');
        ctx.clearRect(0,0,150,150);
        //create line
        var lingrad = ctx.createLinearGradient(0,0,0,150);
       
        lingrad.addColorStop(0, 'blue');
        lingrad.addColorStop(0.4, 'green');
        lingrad.addColorStop(1, 'white');
        ctx.fillStyle = lingrad;
        ctx.fillRect(10,10,130,130);
    }
    function gradients3() {
        var ctx = document.getElementById('canvas4').getContext('2d');
        ctx.clearRect(0,0,150,150);
        var lingrad = ctx.createLinearGradient(0,0,150,150);
        lingrad.addColorStop(0, 'blue');
        lingrad.addColorStop(0.5, 'green');
        lingrad.addColorStop(1, 'white');
        ctx.fillStyle = lingrad;
        ctx.fillRect(10,10,130,130);
    }
    function gradients4() {
        var ctx = document.getElementById('canvas4').getContext('2d');
        ctx.clearRect(0,0,150,150);
        var lingrad = ctx.createLinearGradient(0,0,0,150);
        lingrad.addColorStop(0, 'blue');
        lingrad.addColorStop(0.5, 'white');
        lingrad.addColorStop(0.5, 'green');
        lingrad.addColorStop(1, 'white');
        ctx.fillStyle = lingrad;
        ctx.fillRect(10,10,130,130);
    }
    function gradients5() {
        var ctx = document.getElementById('canvas4').getContext('2d');
        ctx.clearRect(0,0,150,150);
        var lingrad = ctx.createRadialGradient(75,75,10,75,75,70);
        lingrad.addColorStop(0, 'white');
        lingrad.addColorStop(1, 'rgba(255,255,255,0)');
        ctx.fillStyle = lingrad;
        ctx.arc(75, 75, 70, 0, 360);
        ctx.fill();
    }
    function gradients6() {
        var ctx = document.getElementById('canvas4').getContext('2d');
        ctx.clearRect(0,0,150,150);
        var lingrad = ctx.createRadialGradient(5,5,10,75,75,70);
        lingrad.addColorStop(0, 'white');
        lingrad.addColorStop(1, 'rgba(255,255,255,0)');
        ctx.fillStyle = lingrad;
        ctx.arc(75, 75, 70, 0, 360);
        ctx.fill();
    }
</script>

4.shadow

shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color

shadowOffsetX and shadowOffsetY are the shadow distance of x and y;
shadowBlur is 0-1

my example file test4-4.html:
<canvas  id="canvas5" width="150" height="150" style=" background-color: black">
    you are out!
</canvas><br/>
<input type="button" value="pic shadow" onclick="shadow1();" />
<input type="button" value="txt shadow" onclick="shadow2();" />

<script type="text/javascript">
    function shadow1() {
        var ctx = document.getElementById('canvas5').getContext('2d');
        ctx.clearRect(0,0,150,150);
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur    = 4;
        ctx.shadowColor   = 'rgba(255, 0, 0, 0.5)';
        ctx.fillStyle     = 'blue';
        ctx.fillRect(10, 10, 130, 130);
    }

    function shadow2() {
        var ctx = document.getElementById('canvas5').getContext('2d');
        ctx.clearRect(0,0,150,150);
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 3;
        ctx.shadowBlur = 2; 
        ctx.shadowColor = "rgba(255, 255, 255, 0.5)";

        ctx.font = "20px Times New Roman";
        ctx.fillStyle = "red";
        ctx.fillText("Sample String", 15, 70);
    }
</script>

references:
http://www.blogjava.net/myqiao/category/46360.html