Javascript 帆布'；fps无意中加速？_Javascript_Canvas_Frame Rate

Javascript 帆布'；fps无意中加速？

javascript canvas

Javascript 帆布'；fps无意中加速？,javascript,canvas,frame-rate,Javascript,Canvas,Frame Rate,我正在根据在线教程的内容处理canvas元素，并构建了以下页面这是我的标记： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Canvas Game</title> <link rel="stylesheet" href="style.css">

我正在根据在线教程的内容处理canvas元素，并构建了以下页面

这是我的标记：

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

});

$（文档）.ready（函数（）{
常数FPS；
var x=0；
var y=0；
var xDirection=1；
var yDirection=1；
var image=新图像（）；
image.src=null；
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
$（“#虚拟按钮”）。单击（函数（）{
x=0；
y=0；
FPS=30；
image.src='avatar.png'；
设定间隔（绘图，1000/FPS）；
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
ctx.fillRect（0,0，canvas.width，canvas.height）；
ctx.drawImage（图像，x，y）；
x+=1*x方向；
y+=1*y方向；
如果（x>=500）
{
x=500；
xDirection=-1；
}
否则如果（x=300）
{
y=300；
y方向=-1；
}
否则，如果（y=450）
{
x=450；
xDirection=-1；
}
否则，如果（x=250）
{
y=250；
y方向=-1；
}
否则，如果（yMMM..const FPS；这是一个工作示例=>
只是对Alejandro所说的进行了一些“补充”（这是正确的），JS中没有常量。因此，您需要在开始时“声明”var FPS

此外，您必须设置一个“intervalID”变量，这是调用它时返回的变量。但是，在每次setInterval调用之前，您需要调用它（请注意，第一次调用时没有什么需要清除的）
哇，我怎么会错过尝试将常数指定为变量的机会呢。我从在线教程中改编了这篇文章，所以以前没有问题。xD谢谢！谢谢你对setInterval的清晰解释，这真的很有帮助！Np朋友，很高兴听到它有帮助：）
var myInterval;
/* ... */
clearInterval(myInterval)
myInterval = setInterval(draw,1000/FPS)