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; // 地面の衝突判定 if (this.position.y > canvas.height - this.scale) { this.vy *= -0.6; this.vx *= 0.85; this.position.y = canvas.height - this.scale; } this.draw(); }; var density = 100; //パーティクルの密度 var particles = []; //パーティクルをまとめる配列 var colors = ['#D0A000', '#6DD0A5', '#E084C5']; for (var i=0; i<density; i++) { var color = colors[~~(Math.random()*3)]; var scale = ~~(Math.random()*5)+3; var x = Math.random() * 10 - 5; var y = Math.random()* 9 + 4; var g = Math.random()* 0.2 + 0.3; particles[i] = new Particle(scale, color, x, -y, g); particles[i].position.x = canvas.width / 2; particles[i].position.y = 200; } loop(); // ループ処理 function loop() { requestAnimFrame(loop); // 描画をクリアー ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height); for (var i in particles) { particles[i].update(); } }
<canvas id="canvas-container" width="600" height="480"></canvas>