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

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

javascript绘制粒子

1 个答案: