Пример анимации с шариками на javascript
Шарики разбрасываются из фиксированной точки и падают под действием силы тяжести (смотрите здесь).
Код анимации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
window.onload = function() { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 300; //добавляем элемент canvas в body document.body.appendChild(canvas); // начальная позиция var posX = 20, posY = canvas.height / 2; // начальные параметры var particles = {}, particleIndex = 0, settings = { density: 20, particleSize: 10, startingX: canvas.width / 2, startingY: canvas.height / 4, gravity: 0.5 }; // создание шариков function Particle() { this.x = settings.startingX; this.y = settings.startingY; this.vx = Math.random() * 20 - 10; this.vy = Math.random() * 20 - 5; // добавление нового шарика particleIndex ++; particles[particleIndex] = this; this.id = particleIndex; this.life = 0; this.maxLife = 100; } Particle.prototype.draw = function() { this.x += this.vx; this.y += this.vy; this.vy += settings.gravity; this.life++; if (this.life >= this.maxLife) { delete particles[this.id]; } // создание фигур context.clearRect(settings.leftWall, settings.groundLevel, canvas.width, canvas.height); context.beginPath(); context.fillStyle="#f00"; context.arc(this.x, this.y, settings.particleSize, 0, Math.PI*2, true); context.closePath(); context.fill(); } setInterval(function() { context.fillStyle = "#000"; context.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < settings.density; i++) { if (Math.random() > 0.97) { new Particle(); } } for (var i in particles) { particles[i].draw(); } }, 30); }; |
http://hop.ie/particles/examples/05-multiple.html