1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>canvas 动态小球重叠效果</title>
6 <script>
7 window.onload=function()
8 {
9 var canvas=document.getElementById('canvas');
10 var w=canvas.width;
11 var h=canvas.height;
12 var num=30; // 小球个数
13 var balls=[]; // 小球存放数组
14 var cxt=canvas.getContext('2d');
15 var t=null;
16
17 function getBalls() // 创建小球
18 {
19 for(var i=0;i<num;i++)
20 {
21 // 小球随机颜色
22 var tempR=Math.floor(Math.random()*255);
23 var tempG=Math.floor(Math.random()*255);
24 var tempB=Math.floor(Math.random()*255);
25 var tempColor='rgb('+tempR+','+tempG+','+tempB+')';
26
27 //小球随机大小位置
28 var tempR=Math.floor(Math.random()*30+20);
29 var tempX=Math.floor(Math.random()*(w-tempR)+tempR);
30 var tempY=Math.floor(Math.random()*(h-tempR)+tempR);
31
32 var tempBall={
33 x:tempX,
34 y:tempY,
35 r:tempR,
36 color:tempColor,
37 stepX:Math.floor(Math.random()*20-10),
38 stepY:Math.floor(Math.random()*20-10), // 步长 差值
39 };
40 balls.push(tempBall);
41 }//-----------------------------------------创建小球
42 }
43
44 function updateBalls() // 更新小球
45 {
46 for(var i=0;i<balls.length;i++)
47 {
48 balls[i].x+=balls[i].stepX;
49 balls[i].y+=balls[i].stepY;
50 bumpTest(balls[i]); // 更新后的小球数组 x y 位置
51 }
52 }
53
54 function bumpTest(ele) // 碰撞检测
55 {
56 //zuo -->向右走
57 if(ele.x<=ele.r)
58 {
59 ele.x=ele.r;
60 ele.stepX=-ele.stepX; // 反方向运动
61 }
62 // you
63 if(ele.x >= w-ele.r)
64 {
65 ele.x=w-ele.r;
66 ele.stepX=-ele.stepX;
67 }
68 //shang
69 if(ele.y<=ele.r)
70 {
71 ele.y=ele.r;
72 ele.stepY=-ele.stepY;
73 }
74 // xia
75 if(ele.y>=h-ele.r)
76 {
77 ele.y=h-ele.r
78 ele.stepY=-ele.stepY;
79 }
80 }
81
82 function renderBalls()//重置画布
83 {
84 cxt.clearRect(0,0,w,h); // 清空画布
85 for(var i=0;i<balls.length;i++)
86 {
87 cxt.beginPath();// 开始路径
88 cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
89 cxt.fillStyle=balls[i].color;
90 cxt.globalCompositeOperation='xor';
91 cxt.closePath();// 闭合路径
92 cxt.fill(); //填充颜色
93 }
94 }
95
96 getBalls();
97 clearInterval(t);
98 t=setInterval(function(){
99 updateBalls();// 更新小球
100 renderBalls();// 重新绘制小球
101 },50);
102
103 }
104
105 </script>
106 </head>
107
108 <body>
109 <button onClick="window.history.go()"> 点击变换 </button>
110 <canvas width="500" height="300" style="border:1px solid #000" id="canvas"></canvas>
111 </body>
112 </html>
