Canvas Dynamics

HTML

<canvas id="canvas-container" width="600" height="320"></canvas>

CSS

#canvas-container {
    width: 600px;
    height: 320px;
}

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, vx, vy, gv) {
    this.scale = scale; //大きさ
    this.color = color; //色
    this.vx = vx; //X速度
    this.vy = vy; //Y速度
    this.gv = gv; //重力
    this.position = {   // 位置
        x: 0,
        y: 0
    };
};

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();
};

Particle.prototype.update = function() {
    this.vy += this.gv;
    this.position.x += this.vx;
    this.position.y += this.vy;

    this.draw();
};

var particle = new Particle(12, '#D0A000', 7, -11, 0.4);
particle.position.x = 0;
particle.position.y = 200;

loop();

// ループ処理
function loop() {
    requestAnimFrame(loop);
    // 描画をクリアー
    ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
    particle.update();
}