canvas万花筒案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c{
            background:#ccc;
        }
    </style>
</head>
<body>
    <canvas id="c" width="600" height="600"></canvas>
</body>
</html>
<script>
    var d=document.getElementById("c");
    var c=d.getContext("2d");
    var arr=[];
    //创建方块
    var t=setInterval(function(){
        var rects={
            augle:0,
            start:150,
            scale:1,
            color:"rgb("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+")"
        };
        arr.push(rects);
    },1000);
    //放到画布上
    var t2=setInterval(function(){
        c.clearRect(0,0,600,600);
        for(var i=0;i<arr.length;i++){
            c.save();
                c.translate(300,300);
                c.rotate(arr[i].augle);
                c.scale(arr[i].scale,arr[i].scale);
                c.fillStyle=arr[i].color;
                c.fillRect(arr[i].start,arr[i].start,30,30);
            c.restore();
        }
    },10);
    //方块的运动轨迹
    var t3=setInterval(function(){
        for(var i=0;i<arr.length;i++){
            if(arr.length>=30){
                arr.splice(i,1);
            }
            arr[i].augle+=0.02;
            arr[i].scale-=0.002;
            arr[i].start-=0.02;
        }
    },60)
</script>
巴特西

canvas万花筒案例

最新文章

热门文章
