<!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>