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) { this.scale = scale; //大きさ this.color = color; //色 this.vx = vx; //X速度 this.vy = vy; //Y速度 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.position.y -= this.vy; this.draw(); }; var particle = new Particle(12, '#D0A000', 5, -6); particle.position.x = (canvas.width / 2) - 6; particle.position.y = 100; loop(); // ループ処理 function loop() { requestAnimFrame(loop); // 描画をクリアー ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height); particle.update(); }
<canvas id="canvas-container" width="600" height="380"></canvas>