JavaScript繪製粒子

Question

如何在瀏覽器中繪製50000粒子，然後停下來，我知道如何創建粒子的無限動畫，但是如何創建一個一旦完成繪製粒子就停止的粒子。

編輯

因此，我想要時間繪製的粒子，但是當我攻擊一個計時器，它並沒有得到改變，因爲動畫不停止。

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; 
}; 

鏈接在這裏：http://jsfiddle.net/MdSP4/

Answer 1

我不知道，正是你想要做什麼，但如果添加

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

然後將所有的繪製將第二個後停止。