html5 canvas test

今天初试了下三原色在html5上的合成过程:

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>canvasflower</title>
    <script src="script.js"></script>
</head>
<body onload="mplay">
    <div id="display">
        <canvas id="flow" style="width:1200px;height: 600px"> </canvas>
    </div>
</body>
</html>

script.js

/**
 * Created by keejun on 13-12-30.
 */
x=1;
j=9;
k=0;
var mplay=setInterval('play();',1000);
function play(){
    var canvas=document.getElementById("flow");
    if(canvas==null){
        alert("no such elements")
    }
    else{
        if(j<1){
            clearInterval(mplay);
            window.location=canvas.toDataURL("image/jpeg");
         }
        var context=canvas.getContext("2d");
        context.moveTo(150,150);
        context.beginPath();
        context.arc(150,15*9-j*15,j*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle="rgba(255,0,0,0.15)";
        context.fill();

        context.beginPath();
        context.arc(150+k*9,15*8,(k+1)*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle="rgba(0,255,0,0.25)";
        context.fill();

        context.beginPath();
        context.arc(150-k*9,15*8,(k+1)*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle="rgba(0,0,255,0.25)";
        context.fill();
      
        j=j-1;
        k=k+1;

    }
}


你可能感兴趣的:(html5 canvas test)