<!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>
来看看效果图：
