1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 #canvas{ 6 background-color:#cccccc; 7 8 } 9 </style> 10 <script> 11 window.onload=function(){ 12 var canvas=document.getElementById("canvas"); 13 var cobj=canvas.getContext("2d"); 14 // var num=150; 15 var arr=[]; 16 //var angle=0; 17 setInterval(function(){ 18 cobj.clearRect(0,0,600,600); 19 for(var i=0;i<arr.length;i++) 20 { 21 22 cobj.save(); 23 cobj.translate(300,300); 24 cobj.scale(arr[i].scale,arr[i].scale); 25 cobj.rotate(arr[i].angle*Math.PI/180);//旋转时的圆心为定义旋转前画布的原点位置，后面更改了原点的位置只影响到后面的绘制，下面的矩形就是原点在（50,50）地方的，而旋转的圆心在（100，100）处 26 cobj.beginPath(); 27 cobj.fillStyle=arr[i].color; 28 cobj.rect(arr[i].num,arr[i].num,30,30); 29 cobj.fill(); 30 cobj.restore(); 31 } 32 33 34 },60) 35 setInterval(function(){ 36 for(var i=0;i<arr.length;i++) 37 { 38 if( arr[i].num<=0) 39 { 40 arr.splice(i,1);//删掉当前元素； 41 continue;//同时退出本次循环 42 43 } 44 //变化过程中的储存的设置很重要，如果变化的储存没有设置好则有可能会达不到效果 45 arr[i].angle+=2; 46 arr[i].num-=0.2; 47 arr[i].scale-=0.002; 48 if(arr[i].scale<=0.2) 49 arr[i].scale=0.2; 50 } 51 52 },60) 53 setInterval(function(){ 54 var rect={angle:0,num:150,scale:1,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"} ; 55 arr.push(rect); 56 },1000) 57 58 } 59 </script> 60 </head> 61 <body> 62 <canvas id="canvas" width=600px height=600px> 63 您的浏览器已经过期了！ 64 </canvas> 65 66 </body> 67 </html>