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>