javascript绘制粒子

我如何在浏览器中绘制

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

var scene=new scene（），
粒子=[]，
len=40000，
高度=document.body.offsetHeight，
宽度=document.body.offsetWidth；
函数粒子（）{
这个.x=0；
这个。y=0；
此值为0.size=0；
这个深度=0；
这是0.vy=0；
}
Particle.prototype={
构造器：粒子，
更新：功能（宽度、高度）{
如果（此.y>高度）{
this.y=1——this.size；
}
this.y+=this.vy；
}
};
对于（变量i=0；i

---

此处链接：

我不确定您到底想做什么，但如果您添加

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

---

然后，所有绘图将在一秒钟后停止。

我们缺少您的“场景”对象定义。为什么不在

Scene.animate（）之后设置
Scene.paused=True
？