javascript - 重新启动 JavaScript 函数

Question

我有这段 JavaScript 代码，它有一些功能。它在 html canvas 元素中编写了一个简单的动画代码。

我希望这样当我单击带有 one 类的 html 按钮时，动画会重新启动。

我不太确定如何解决这个问题，并且尝试了几种方法，但似乎都不起作用

这是我的 JavaScript 代码:

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d'),

// Global variables
particles = {},
particleIndex = 0;
particleNum = 1;

// Context properties
c.fillStyle = "white";
c.fillRect(0,0,canvas.width,canvas.height);

// Particle (Square) properties
function Particle(){
    this.x = canvas.width / 2;
    this.y = canvas.height / 2;
    this.vx = Math.random() * 10 - 5;
    this.vy = Math.random() * 10 - 5; 
    this.gravity = 0.2;
    particleIndex++;
    particles[particleIndex] = this;
    this.id = particleIndex;
    this.life = 0;
    this.maxLife = Math.random() * 100 + 100;
    this.color = "hsla("+parseInt(Math.random()*360, 10)+",100%,50%, 0.2)";
}

// Drawing the particle
Particle.prototype.draw = function(){
    this.x += this.vx;
    this.y += this.vy;

    if (Math.random() < 0.00001){
        this.vx = Math.random() * 10 - 5;
        this.vy = Math.random() * 10 - 5;
    }

    //Uncomment line below for gravity effect
    //this.vy += this.gravity;

    // Deletes particle if greater than or equal to its max life
    this.life++;
    if (this.life >= this.maxLife){
        delete particles[this.id];
    }
    c.fillStyle = this.color;
    c.fillRect(this.x, this.y, 10, 10);
};


// Animation Interval 
setInterval(function(){
    c.globalCompositeOperation = "source-over";
    c.fillStyle = "rgba(0,0,0,0.05)";
    c.fillRect(0,0,canvas.width,canvas.height);

    c.globalCompositeOperation = "lighter";
    for (var i = 0; i < particleNum; i++){
    new Particle();
    }

    for (var i in particles){
        particles[i].draw();
    }
}, 15);

这是 Canvas 和触发 Canvas 显示的按钮的 html 代码:

 <canvas width="400" height="250" class="canvas" id="canvas"></canvas>
 <script src="canvas.js"></script>

 <div class="buttons">
    <button class="one">Canvas 1</button>
</div>

这是显示 Canvas 元素的 jQuery 代码:

$('.one').click(function() {
    $('.canvas').show();
});

我也想知道，有没有一种简单的方法可以在 jQuery 中做到这一点？就像单击时一样，如果 Canvas 未显示，则显示 Canvas 并启动动画，如果显示，则停止动画并隐藏 Canvas ？

谢谢

Answer 1

添加 Javascript 自调用函数并为按钮和动画函数调用事件处理程序。

自调用函数用于创建一个闭包，它只是防止“污染”全局范围。

(function(){
var animation = function() {
  var canvas = document.getElementById('canvas');
  var c = canvas.getContext('2d'),

    // Global variables
    particles = {},
    particleIndex = 0;
  particleNum = 1;

  // Context properties
  c.fillStyle = "white";
  c.fillRect(0, 0, canvas.width, canvas.height);

  // Particle (Square) properties
  function Particle() {
    this.x = canvas.width / 2;
    this.y = canvas.height / 2;
    this.vx = Math.random() * 10 - 5;
    this.vy = Math.random() * 10 - 5;
    this.gravity = 0.2;
    particleIndex++;
    particles[particleIndex] = this;
    this.id = particleIndex;
    this.life = 0;
    this.maxLife = Math.random() * 100 + 100;
    this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",100%,50%, 0.2)";
  }

  // Drawing the particle
  Particle.prototype.draw = function() {
    this.x += this.vx;
    this.y += this.vy;

    if (Math.random() < 0.00001) {
      this.vx = Math.random() * 10 - 5;
      this.vy = Math.random() * 10 - 5;
    }

    //Uncomment line below for gravity effect
    //this.vy += this.gravity;

    // Deletes particle if greater than or equal to its max life
    this.life++;
    if (this.life >= this.maxLife) {
      delete particles[this.id];
    }
    c.fillStyle = this.color;
    c.fillRect(this.x, this.y, 10, 10);
  };


  // Animation Interval 
  setInterval(function() {
    c.globalCompositeOperation = "source-over";
    c.fillStyle = "rgba(0,0,0,0.05)";
    c.fillRect(0, 0, canvas.width, canvas.height);

    c.globalCompositeOperation = "lighter";
    for (var i = 0; i < particleNum; i++) {
      new Particle();
    }

    for (var i in particles) {
      particles[i].draw();
    }
  }, 15);
}

$('.one').click(function() {
  $('.canvas').show();
  animation();
});
animation();
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="400" height="250" class="canvas" id="canvas"></canvas>
<script src="canvas.js"></script>

<div class="buttons">
  <button class="one">Canvas 1</button>
</div>