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(); }
<canvas id="canvas-container" width="600" height="320"></canvas>