绘制canvas彩色泡泡小球碰撞

来源：互联网发布：原创歌词制作软件编辑：程序博客网时间：2024/05/01 20:54

globalCompositeOperation带来的不一样的烟花

一.知识点

1.动画：

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

2.小球碰撞的状态：

ctx.globalCompositeOperation="xor";//lighter

二.代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">    当前浏览器不支持Canvas，请更换浏览器后再试</canvas><script>    var balls = [];    window.onload = function(){        var canvas = document.getElementById("canvas");        var  context=canvas.getContext('2d');        canvas.width = 1200;        canvas.height = 800;        for(var i=0;i<100;i++){            var R=Math.floor(Math.random()*255);//可对一个数进行下舍入。0.1就是0    0.9就是1            var G=Math.floor(Math.random()*255);            var B=Math.floor(Math.random()*255);            var radius=Math.random()*50+20;            aBall={                color:"rgb("+R+","+G+","+B+")",                radius:radius,                x:Math.random()*(canvas.width-2*radius)+radius,                y:Math.random()*(canvas.height-2*radius)+radius,                vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),//pow() 方法可返回 x 的 y 次幂的值。                vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))            }            balls[i]=aBall;        }        setInterval(            function(){                draw(context);                update(canvas.width,canvas.height);            },            50        );      }     function draw(ctx){        var canvas = ctx.canvas;        ctx.clearRect(0,0,canvas.width,canvas.height);        for( var i = 0 ; i < balls.length ; i ++ ){            ctx.globalCompositeOperation="xor";//lighter            ctx.fillStyle=balls[i].color;            ctx.beginPath();            ctx.arc(balls[i].x,balls[i].y,balls[i].radius,0,2*Math.PI);            ctx.closePath();            ctx.fill();        }    }    function update(canvasWidth, canvasHight){        for( var i = 0 ; i < balls.length ; i ++ ){            balls[i].x += balls[i].vx;            balls[i].y += balls[i].vy;            if( balls[i].x - balls[i].radius<=0 ){                balls[i].vx = -balls[i].vx;                balls[i].x = balls[i].radius;            }            if( balls[i].x + balls[i].radius>=canvasWidth ){                balls[i].vx = -balls[i].vx;                balls[i].x = canvasWidth-balls[i].radius;            }            if( balls[i].y - balls[i].radius<=0 ){                balls[i].vy = -balls[i].vy;                balls[i].y = balls[i].radius;            }            if( balls[i].y + balls[i].radius>=canvasHight ){                balls[i].vy = -balls[i].vy;                balls[i].y = canvasHight-balls[i].radius;            }        }    }</script></body></html>

0 0