パーティクルシステムを停止するには

Question

30秒後にこのパーティクルシステムを停止する方法を理解しようとしています。寒いのを止める方法はありますか？粒子はどこにあるの？また、パーティクルが消滅する別の方法があるので、既に開始しているパーティクルが画面のパスを完成させるでしょうか？

私は高度なコーダーではなく、このシステムをオンラインで見つけました。何か助けていただきありがとうございます。ありがとう。

var INTENSITY = 200; 

(function(ns) { 
    ns = ns || window; 

    function ParticleSystem(ctx, width, height, intensity) { 
    this.particles = []; 
    intensity = intensity; 
    this.addParticle = function() { 
     this.particles.push(new Snow(ctx, width)); 
    } 
    while (intensity--) { 
     this.addParticle(); 
    } 
    this.render = function() { 
     ctx.save(); 
     ctx.clearRect(0,0,width,height); 
     for (var i = 0, particle; particle = this.particles[i]; i++) { 
     particle.render(); 
     } 
     ctx.restore(); 
    } 


    this.update = function() { 
     for (var i = 0, particle; particle = this.particles[i]; i++) { 
     particle.x += particle.vx; 
     particle.y += particle.vy + 1; 
     if (particle.y > height - 1) { 
      particle.vx = 0; 
      particle.vy = 0; 
      particle.y = height; 
      if (particle.killAt && particle.killAt < +new Date) this.particles.splice(i--, 1); 
      else if (!particle.killAt) { 
       particle.killAt = +new Date + 5000; 
       this.addParticle(); 
      } 
      } 
     } 
     } 
    } 

    function Snow(ctx, width) { 
     this.vx = ((Math.random() - 0.5) * 5); 
     this.vy = (Math.random() * 4) + 0.25; 
     this.x = Math.floor((Math.random() * width)); 
     this.y = -Math.random() * 30; 
     this.alpha = (Math.random() * 0.99) + 0.15; 
     this.radius = Math.random() * 3; 
     this.color = 'rgba(255,255,255,1)'; 
     this.render = function() { 
     ctx.globalAlpha = this.alpha; 
     ctx.fillStyle = this.color; 
     ctx.beginPath(); 
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); 
     ctx.fill(); 
    } 
} 

    ns.precCanvas = function() { 
     var myCanvas = document.getElementById('myCanvas'); 
     var ctx = myCanvas.getContext('2d'); 
     var width = myCanvas.width = 300; 
     var height = myCanvas.height = 610; 
     var particleSystem = new ParticleSystem(ctx, width, height, INTENSITY); 
     (function draw() { 
     requestAnimationFrame(draw); 
     particleSystem.update(); 
     particleSystem.render(); 
     })(); 

    } 

    })(window); 

    precCanvas(); 

Answer 1

あなたは​​によって返さanimationIdを保存し、後でアニメーションを停止する必要があります。

ns.precCanvas = function() { 
    var myCanvas = document.getElementById('myCanvas'); 
    var ctx = myCanvas.getContext('2d'); 
    var width = myCanvas.width = 300; 
    var height = myCanvas.height = 610; 
    var particleSystem = new ParticleSystem(ctx, width, height, INTENSITY); 
    var animationId; 

    function draw() { 
    animationId = requestAnimationFrame(draw); 
    particleSystem.update(); 
    particleSystem.render(); 
    } 

    function stop() { 
    window.cancelAnimationFrame(animationId); 
    } 

    setTimeout(stop, 30 * 1000); 
    draw(); 
} 

作業フィドルhere：これであなたのprecCanvas機能を交換してください。