我有这个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中执行此操作？像点击一样，如果没有显示画布，显示画布并开始动画，如果显示，停止动画并隐藏画布？
谢谢
答案 0 :(得分：1)
添加一个Javascript Self Invoking Functions并在你的事件处理程序中调用你的动画函数按钮。
自我调用函数用于创建一个简单地阻止＆＃34;污染＆＃34;全球范围。
(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>
答案 1 :(得分：0)
只需将代码包装在一个函数中，然后在单击按钮时重新运行它。 请记住清除间隔和其他共享变量。
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>