<!DOCTYPE HTML>
<html>
<head>
<style>
#canvas{
background-color:#cccccc; }
</style>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
// var num=150;
var arr=[];
//var angle=0;
setInterval(function(){
cobj.clearRect(0,0,600,600);
for(var i=0;i<arr.length;i++)
{ cobj.save();
cobj.translate(300,300);
cobj.scale(arr[i].scale,arr[i].scale);
cobj.rotate(arr[i].angle*Math.PI/180);//旋转时的圆心为定义旋转前画布的原点位置，后面更改了原点的位置只影响到后面的绘制，下面的矩形就是原点在（50,50）地方的，而旋转的圆心在（100，100）处
cobj.beginPath();
cobj.fillStyle=arr[i].color;
cobj.rect(arr[i].num,arr[i].num,30,30);
cobj.fill();
cobj.restore();
} },60)
setInterval(function(){
for(var i=0;i<arr.length;i++)
{
if( arr[i].num<=0)
{
arr.splice(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:150,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="canvas" width=600px height=600px>
您的浏览器已经过期了！
</canvas> </body>
</html>