炫酷万花筒 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    #con{
        background: #ccc;
    }
</style>
<script>
    window.onload=function(){
        var oCon=document.getElementById('con');
        var oCanvas=oCon.getContext("2d");
        var arr=[];
                
        setInterval(function(){
            oCanvas.clearRect(0, 0, 600, 600);
            for(var i=0;i<arr.length;i++){
                oCanvas.save();
                oCanvas.translate(300, 300);
                oCanvas.rotate(arr[i].angle*Math.PI/180);
                oCanvas.scale(arr[i].scale,arr[i].scale);
                oCanvas.beginPath();
                oCanvas.rect(arr[i].num, arr[i].num, 30, 30);
                oCanvas.fillStyle=arr[i].color;
                oCanvas.fill();
                oCanvas.restore();
            }
            
        }, 100);

        // 数据变化
        setInterval(function(){
            for(var i=0;i<arr.length;i++){
                if (arr[i].num<=0) {
                    arr.slice(i,1);
                    continue;
                };
                arr[i].angle+=2;
                arr[i].num-=0.2;
                arr[i].scale-=0.002;
                if (arr[i].scale<0.2) {
                    arr[i].scale=0.2;
                };
            }
        }, 60);

        // 产生矩形数据
        setInterval(function(){
            var rect={angle:0,num:200,scale:1,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"};
            arr.push(rect);
        }, 1000);
    
    }
</script>
</head>
<body>
    <canvas id="con" width="600" height="600"></canvas>
</body>
</html>

来看看效果图：

posted @ 2014-09-23 14:43  Jerry24  阅读(211)  评论(0)  编辑  收藏  举报