Canvas 动态小球重叠效果

  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>