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>
时间： 2024-08-03 18:06:11