简体   繁体   中英

javascript draw particles

How can I draw around 50000 particles in a browser and then just stop, I know how to create unending animations of particles, but how can I create one that once its done drawing the particles it just stops.

Edit

So essintially I want to time the drawing of the particles, however when i attack a timer, it doesnt get the change because the animation doesnt stop.

 var scene = new Scene(), particles = [], len = 40000, height = document.body.offsetHeight, width = document.body.offsetWidth; function Particle() { this.x = 0; this.y = 0; this.size = 0; this.depth = 0; this.vy = 0; } Particle.prototype = { constructor: Particle, update: function (width, height) { if (this.y > height) { this.y = 1 - this.size; } this.y += this.vy; } }; for (var i = 0; i < len; i++) { var particle = new Particle(); particle.x = Math.random() * width; particle.y = Math.random() * height; particle.depth = Math.random() * 10 | 0; particle.size = (particle.depth + 1) / 8; particle.vy = (particle.depth * .25) + 1 / Math.random(); particles.push(particle); } function falling_particles(scene) { for (var i = 0, l = particles.length; i < l; i++) { var particle = particles[i]; for (var w = 0; w < particle.size; w++) { for (var h = 0; h < particle.size; h++) { var pData = (~~(particle.x + w) + (~~(particle.y + h) * scene.width)) * 4; scene.idata.data[pData] = 255; scene.idata.data[pData + 1] = 255; scene.idata.data[pData + 2] = 255; scene.idata.data[pData + 3] = 255; } } particle.update(scene.width, scene.height); } return scene.idata; } scene.setup(document.getElementById('canvas'), falling_particles, width, height, !0); scene.animate(); window.onresize = function () { height = scene.height = scene.canvas.height = document.body.offsetHeight; width = scene.width = scene.canvas.width = document.body.offsetWidth; }; 

link here: http://jsfiddle.net/MdSP4/

I'm not sure, what exactly you want to do, but if you add

setTimeout(function(){
    scene.paused = true;
},1000);

Then all the drawing will stop after a second.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM