重新启动Javascript函数

Question

我有一些功能的javascript代码。 它在html canvas元素中编码一个简单的动画。

我希望它这样，当我在HTML按钮点击带班one ，动画重新启动。

我不确定如何解决这个问题，并尝试了几种方法，但似乎都没有效果

这是我的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自我调用函数，并在事件处理程序中为您的按钮调用动画函数。

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

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

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>