帆布' fps 无意间加快？
我正在根据在线教程摆弄画布元素，并构建了以下页面，此处。
这是我的标记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Canvas Game</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Cool Canvas Bouncing Effect!</h1>
<p>Which would you like to see bounce around?</p>
<input id="beachBallButton" type="button" value="Beach Ball" />
<input id="avatarButton" type="button" value="Avatar" />
</header>
<br />
<canvas id="myCanvas" width="600" height="400">
Your browser does not support canvas!
</canvas>
</body>
</html>
这是我的 JavaScript：
$(document).ready(function() {
const FPS;
var x = 0;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var image = new Image();
image.src = null;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
$('#avatarButton').click(function() {
x = 0;
y = 0;
FPS = 30;
image.src = 'avatar.png';
setInterval(draw, 1000 / FPS);
function draw() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(image, x, y);
x += 1 * xDirection;
y += 1 * yDirection;
if (x >= 500)
{
x = 500;
xDirection = -1;
}
else if (x <= 0)
{
x = 0;
xDirection = 1;
}
if (y >= 300)
{
y = 300;
yDirection = -1;
}
else if (y <= 0)
{
y = 0;
yDirection = 1;
}
}
});
$('#beachBallButton').click(function() {
x = 0;
y = 0;
FPS = 60;
image.src = 'beachball.png';
setInterval(draw, 1000 / FPS);
function draw() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(image, x, y);
x += 5 * xDirection;
y += 5 * yDirection;
if (x >= 450)
{
x = 450;
xDirection = -1;
}
else if (x <= 0)
{
x = 0;
xDirection = 1;
}
if (y >= 250)
{
y = 250;
yDirection = -1;
}
else if (y <= 0)
{
y = 0;
yDirection = 1;
}
}
});
});
现在，假设您单击 Avatar 按钮，然后单击 Beach Ball，FPS 会加快。但是，我在这两个函数的 click 函数中重置了 FPS 变量。我还重置了 x 和 y 变量。
此外，我可以继续单击相同按钮，速度也会显着提高。
有人可以帮助解释为什么会发生这种情况吗？
谢谢！
I am messing around with the canvas element based off of tutorials online and have constructed the following page, here.
Here is my markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Canvas Game</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Cool Canvas Bouncing Effect!</h1>
<p>Which would you like to see bounce around?</p>
<input id="beachBallButton" type="button" value="Beach Ball" />
<input id="avatarButton" type="button" value="Avatar" />
</header>
<br />
<canvas id="myCanvas" width="600" height="400">
Your browser does not support canvas!
</canvas>
</body>
</html>
And here is my JavaScript:
$(document).ready(function() {
const FPS;
var x = 0;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var image = new Image();
image.src = null;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
$('#avatarButton').click(function() {
x = 0;
y = 0;
FPS = 30;
image.src = 'avatar.png';
setInterval(draw, 1000 / FPS);
function draw() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(image, x, y);
x += 1 * xDirection;
y += 1 * yDirection;
if (x >= 500)
{
x = 500;
xDirection = -1;
}
else if (x <= 0)
{
x = 0;
xDirection = 1;
}
if (y >= 300)
{
y = 300;
yDirection = -1;
}
else if (y <= 0)
{
y = 0;
yDirection = 1;
}
}
});
$('#beachBallButton').click(function() {
x = 0;
y = 0;
FPS = 60;
image.src = 'beachball.png';
setInterval(draw, 1000 / FPS);
function draw() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(image, x, y);
x += 5 * xDirection;
y += 5 * yDirection;
if (x >= 450)
{
x = 450;
xDirection = -1;
}
else if (x <= 0)
{
x = 0;
xDirection = 1;
}
if (y >= 250)
{
y = 250;
yDirection = -1;
}
else if (y <= 0)
{
y = 0;
yDirection = 1;
}
}
});
});
Now, say you click on the Avatar button, and then click on the Beach Ball afterwards, the FPS is sped up. However, I reset the FPS variable within the click functions of both functions. I also reset the x and y variables.
Additionally, I could just keep clicking the same button and the speed will increase dramatically as well.
Could someone help explain why this is happening?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
嗯……常量 FPS； <---这是什么？
据我所知，javascript 中没有常量。无论如何，如果它是一个常量，为什么你要尝试多次设置它的值呢？我认为这个语句失败了，第一次设置 FPS 时，您创建了一个全局变量，后来这个全局变量被所有函数共享。
另外，您不使用clearInterval，并且每次单击时都会调用一个新的setInterval，因此如果您在“beachBallButton”中单击3次，您将运行3个setIntervals函数，每个函数都执行代码。这很可能会导致“加速”。
MMM..... const FPS; <--- What is this?
As far as I remember, there is no constants in javascript. Anyway, if it is a constant, why you try to set it's value later several times? I think that this statement fails and the first time you set the FPS, you create a global var, and later this global var is shared by all the functions.
Also, you don't use clearInterval, and you are invoking a new setInterval every time you make a click, so if you click 3 times in "beachBallButton", you will have 3 setIntervals functions running, each of them executing the code. This is likely to cause the "speed up".
这是一个工作示例 => http://www.jsfiddle.net/steweb/sLpCA/
只是一些“补充” Alejandro 所说的（这是正确的），JS 中没有常量。因此，您需要在开始时“声明”
var FPS。此外，您必须设置一个“intervalID”变量，这就是 setInterval当你调用它时返回。但是，在每次 setInterval 调用之前，您需要删除“活动”间隔操作你打电话（注意第一次没有什么需要清除的）
this a working example => http://www.jsfiddle.net/steweb/sLpCA/
Just some 'additions' to what Alejandro said (that is correct), no constants in JS. So you need to 'declare'
var FPSat the beginning.Moreover, you have to set an 'intervalID' variable, that is what the setInterval returns when you call it. BUT, before each setInterval call, you need to remove the 'active' interval actions you called (note that the first time there's nothing to clear)