Canvas Particle

HTML

<canvas id="canvas-container" width="650" height="300"></canvas>

JavaScript

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();


var canvas = document.querySelector('#canvas-container');
var ctx = canvas.getContext('2d');




var Particle = function(scale, color, speed) {
    this.scale = scale; //大きさ
    this.color = color; //色
    this.speed = speed; //速度
    this.position = {   // 位置
        x: 100,
        y: 100
    };
};

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

var density = 100;  //パーティクルの密度
var particles = []; //パーティクルをまとめる配列

for (var i=0; i<density; i++) {
    particles[i] = new Particle(1, '#000', Math.random()*(4-2)+2);
    particles[i].position.x = Math.random()*canvas.width;
    particles[i].position.y = Math.random()*canvas.height;
    particles[i].draw();
}

loop();

function loop() {
    requestAnimFrame(loop);
    // 描画をクリアー
    ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
    
    for (var i=0; i<density; i++) {
        particles[i].position.x += particles[i].speed;
        particles[i].draw();
        
        if (particles[i].position.x > canvas.width) particles[i].position.x = -30;
    }
}