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

这是画布和按钮的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中执行此操作？像点击一样，如果没有显示画布，显示画布并开始动画，如果显示，停止动画并隐藏画布？

谢谢

Answer 1

添加一个Javascript Self Invoking Functions并在你的事件处理程序中调用你的动画函数按钮。

自我调用函数用于创建一个简单地阻止＆＃34;污染＆＃34;全球范围。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需将代码包装在一个函数中，然后在单击按钮时重新运行它。请记住清除间隔和其他共享变量。

var tick, canvas = document.getElementById('canvas');
var doStuff = function(enable) {

  //clear the interval if set
  tick && clearInterval(tick);

  //dont restart
  if (!enable) return;

  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 
  tick = 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);
}

document.querySelector('button').addEventListener('click', function() {
  if (canvas.style.display === 'block') {
    doStuff();
    canvas.style.display = '';
  } else {
    doStuff(true);
    canvas.style.display = 'block';
  }
});

canvas {
  display: none;
}

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

重启Javascript函数

2 个答案: