您的位置: 首页  >  文章  >  canvas(彩色泡泡碰撞)

canvas(彩色泡泡碰撞)

分类: 文章 • 2025-03-18 17:17:03

globalCompositeOperation带来的不一样的烟花

canvas(彩色泡泡碰撞)

一.知识点

1.动画：

setInterval(
            function(){
                draw(context);
                update(canvas.width,canvas.height);
            },
            50
        );  

2.小球碰撞的状态：

 ctx.globalCompositeOperation="xor";//lighter

二.代码

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8. <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">  
  9.     当前浏览器不支持Canvas，请更换浏览器后再试  
  10. </canvas>  
  11.   
  12. <script>  
  13.     var balls = [];  
  14.     window.onload = function(){  
  15.         var canvas = document.getElementById("canvas");  
  16.         var  context=canvas.getContext('2d');  
  17.         canvas.width = 1200;  
  18.         canvas.height = 800;  
  19.         for(var i=0;i<100;i++){  
  20.             var R=Math.floor(Math.random()*255);//可对一个数进行下舍入。0.1就是0    0.9就是1  
  21.             var G=Math.floor(Math.random()*255);  
  22.             var B=Math.floor(Math.random()*255);  
  23.             var radius=Math.random()*50+20;  
  24.             aBall={  
  25.                 color:"rgb("+R+","+G+","+B+")",  
  26.                 radius:radius,  
  27.                 x:Math.random()*(canvas.width-2*radius)+radius,  
  28.                 y:Math.random()*(canvas.height-2*radius)+radius,  
  29.                 vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),//pow() 方法可返回 x 的 y 次幂的值。  
  30.                 vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))  
  31.             }  
  32.             balls[i]=aBall;  
  33.         }  
  34.         setInterval(  
  35.             function(){  
  36.                 draw(context);  
  37.                 update(canvas.width,canvas.height);  
  38.             },  
  39.             50  
  40.         );    
  41.     }   
  42.     function draw(ctx){  
  43.         var canvas = ctx.canvas;  
  44.         ctx.clearRect(0,0,canvas.width,canvas.height);  
  45.         for( var i = 0 ; i < balls.length ; i ++ ){  
  46.             ctx.globalCompositeOperation="xor";//lighter  
  47.             ctx.fillStyle=balls[i].color;  
  48.             ctx.beginPath();  
  49.             ctx.arc(balls[i].x,balls[i].y,balls[i].radius,0,2*Math.PI);  
  50.             ctx.closePath();  
  51.             ctx.fill();  
  52.         }  
  53.     }  
  54.     function update(canvasWidth, canvasHight){  
  55.         for( var i = 0 ; i < balls.length ; i ++ ){  
  56.   
  57.             balls[i].x += balls[i].vx;  
  58.             balls[i].y += balls[i].vy;  
  59.   
  60.             if( balls[i].x - balls[i].radius<=0 ){  
  61.                 balls[i].vx = -balls[i].vx;  
  62.                 balls[i].x = balls[i].radius;  
  63.             }  
  64.             if( balls[i].x + balls[i].radius>=canvasWidth ){  
  65.                 balls[i].vx = -balls[i].vx;  
  66.                 balls[i].x = canvasWidth-balls[i].radius;  
  67.             }  
  68.             if( balls[i].y - balls[i].radius<=0 ){  
  69.                 balls[i].vy = -balls[i].vy;  
  70.                 balls[i].y = balls[i].radius;  
  71.             }  
  72.             if( balls[i].y + balls[i].radius>=canvasHight ){  
  73.                 balls[i].vy = -balls[i].vy;  
  74.                 balls[i].y = canvasHight-balls[i].radius;  
  75.             }  
  76.         }  
  77.     }  
  78. </script>  
  79. </body>  
  80. </html>  

相关推荐