html5 canvas test

最新推荐文章于 2024-08-10 08:34:14 发布

weixin_34211761

最新推荐文章于 2024-08-10 08:34:14 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/keejun/blog/188868

为什么80%的码农都做不了架构师？>>>

今天初试了下三原色在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;

    }
}

转载于:https://my.oschina.net/keejun/blog/188868