canvas梦幻七彩泡泡

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>七彩泡泡</title>
    <style>
    html,body{
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        overflow: hidden;
    }

    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     ||  
          function( callback ){
            window.setTimeout(callback, 1000 / 20);
          };
})();
    var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");

    var W=window.innerWidth, H=window.innerHeight;
    mycanvas.width=W;
    mycanvas.height=H;

    var paintCanvas=function(){
        ctx.fillStyle="rgba(0,0,0,1)";
        //ctx.clearRect(0,0,W,H);
        ctx.fillRect(0,0,W,H);
    }

    var particleCount=200,
        particles=[];
    function Particle(){
        this.x=Math.random()*W;
        this.y=Math.random()*H;         
        this.vx=-1+Math.random()*2;   
        this.vy=-1+Math.random()*2;    
        this.radius=Math.random()*20;   
        this.color="rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"; //随机颜色

        this.draw=function(){
            ctx.fillStyle=this.color;
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
            ctx.fill();
        }

    }
    for(var i=0; i<particleCount;i++){
        particles.push(new Particle())
    }

    function draw() {
    paintCanvas();   
    for (var i = 0; i < particles.length; i++) {
        p = particles[i];
        p.draw();
    }
    update();
}

function update() {    
    for (var i = 0; i < particles.length; i++) {
        p = particles[i];        
        p.x += p.vx;
        p.y += p.vy;
        if(p.x + p.radius > W) 
            p.x = p.radius;
        
        else if(p.x - p.radius < 0) {
            p.x = W - p.radius;
        }
        
        if(p.y + p.radius > H) 
            p.y = p.radius;
        
        else if(p.y - p.radius < 0) {
            p.y = H - p.radius;
        }
        
    }
}
function animloop() {
    draw();
    requestAnimFrame(animloop);
}

animloop();

    </script>
</body>
</html>

canvas最简单的多粒子运动，可以更改圆形的大小，密度，运动速度，颜色等；

 

posted @ 2019-06-17 16:53  牛妈代代  阅读(189)  评论(0)    收藏  举报