我根据在线教程摆弄 Canvas 元素并构建了以下页面，here .
这是我的标记:
<!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 变量。
此外，我可以一直点击相同按钮，速度也会显着提高。
有人能帮忙解释一下为什么会这样吗？
谢谢!
最佳答案
MMM .....常量 FPS； <--- 这是什么？
据我所知，javascript 中没有常量。无论如何，如果它是一个常量，为什么你要多次尝试设置它的值？我认为这条语句失败了，第一次设置 FPS 时，您创建了一个全局变量，后来这个全局变量被所有函数共享。
此外，您不使用 clearInterval，每次点击时都会调用一个新的 setInterval，因此如果您在“beachBallButton”中点击 3 次，您将运行 3 个 setIntervals 函数，每个函数都执行代码。这很可能导致“提速”。
关于javascript - Canvas 的 fps 无意中加快了速度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5000096/