javascript - Canvas 的 fps 无意中加快了速度？-6ren

javascript - Canvas 的 fps 无意中加快了速度？

转载作者：塔克拉玛干更新时间：2023-11-02 22:54:33

24

4

我根据在线教程摆弄 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/

24

4

0

文章推荐： ios - 如何在后台为 Firebase 实时数据库设置值？

文章推荐： javascript - 使用 jQuery AJAX 调用防止 "race conditions"

文章推荐： ios - 如何将单个 tileset 图像导入 xCode(Sprite Kit)？

文章推荐： javascript - iPad 和 jQuery hide() 在页面加载时有很大的延迟

ffmpeg - 加快/减慢视频ffmpeg
我想使用 ffmpeg 框架更改视频速度。我为此使用了这个命令: ffmpeg -y -i /storage/extSdCard/Video/1.avi -filter_complex [0:v]fp
python - 加快 while 循环匹配数组中的模式
我有以下数据数组，有 200 万个条目: [20965 1239 296 231 -1 -1 20976 1239 299 314 147 337 255
database - 加快 sqlFetch()
我正在使用 Oracle 数据库，并且想获取一个包含 3000 万条记录的表。 library(RODBC) ch <- odbcConnect("test", uid="test_user",
android - 加快 FFmpeg 处理时间
我在 android 上使用 FFmpeg 来: 1- 合并 3 个视频 2-添加音频 3-添加标志 4-修剪 3 个视频之一 5-改变输出的fps 我已经实现了正确的代码，但花了 30 分钟。对于(
julia - 加快 Julia 中的包加载速度
我使用 GLPKMathProgInterface 和 JuMP 编写了一个程序来解决 Julia 中的线性程序。 Julia 代码由 python 程序调用，该程序通过多个命令行调用运行多个 Jui
performance - 加快 POVRAY 图像创建的示例配置
我们使用 POV-Ray 每次运行生成大约 80 张图像，我们将这些图像拼接在一起形成两个移动的 GIF 文件(一个场景的两个 360 度 View )。我们正在寻找尽可能加快此镜像创建的方法(在 h
iphone - 加快 iPhone 开发速度的最快途径
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
sql - 加快 Python 执行速度
我将数据从一个数据库插入到另一个数据库，所以我有 2 个连接(Conn1 和 Conn2)。下面是代码(使用pypyodbc)。 import pypyodbc Conn1_Query = "SE
iphone - 加快 EKEvents 的获取速度
在我的应用程序中，我显示 EKEvents 列表，我想在 UITableView 中显示一个月的所有事件，每个部分包含各自的日期。嗯，这可行，我得到了我需要的所有数据，但获取速度非常慢。问题在于事件
javascript - 加快 WordPress 网站上的轮播速度
我有一个移动速度非常慢的传送带。我不知道什么JS脚本控制速度，我需要它来加速。无法从主题制作者那里获得任何帮助。任何建议都会非常有帮助。谢谢页面: http://krankgolf2017.wpen
vba - 加快 VBA 速度吗？
有没有办法加快这段代码的速度？我需要它来删除相同的内容并将其写入单元格，以强制其他 VBA 代码运行另一列上的代码。这就是它的作用，只是 super 慢。有时此表上有 2000 个条目/行。每个单元大
python - 加快 openpyxl 读取速度
我正在开发一个相当大的程序，它再次从一个相当大的 Excel 电子表格中获取数据。由于一些奇怪的原因，加载这个大的 Excel 文件需要很长时间，我希望能以某种方式加快速度。我做了自己的研究并尝试了
vba - 加快 VBA 中按钮格式化的速度
我有下面的代码，将所有按钮(有 10 个)着色为灰色，以清除任何先前着色的按钮，然后将所选按钮着色为蓝色。基本上充当当前选择哪个按钮的指示器。我注意到代码现在需要一些时间才能通过这种修饰添加来运行，我
.net - 加快 LINQ 查询速度的技巧？
我有一个 LINQ 查询，它正在搜索包含大约 250,000 条记录的 SQL 表，并且仅搜索 2 个字段。这两个字段都已建立索引，但我发现它的运行速度仍然相当慢。下面是代码，有人可以提出任何建议来
python - 加快 Pandas 应用功能
对于相对较大的 Pandas DataFrame(几十万行)，我想创建一个应用函数结果的系列。问题是该功能不是很快，我希望它能以某种方式加快速度。 df = pd.DataFrame({ 'valu
r - 加快 R 中的概率加权采样
这个问题在这里已经有了答案: Faster weighted sampling without replacement (3 个答案) 关闭 9 年前。如何在 R 中加快概率加权采样。 # Let
phantomjs - 加快 phantomjs 屏幕捕获时间？
在运行 PhantomJS 提供的 rasterize.js 示例时，我发现我必须等待 20 秒或更长时间才能生成网页图像。有没有可能在不消耗大量资源的情况下加快速度的方法？我基本上希望快速生成从加
python - 加快 openpyxl 读取速度
我正在开发一个相当大的程序，它再次从一个相当大的 Excel 电子表格中获取数据。由于一些奇怪的原因，加载这个大的 Excel 文件需要很长时间，我希望能以某种方式加快速度。我做了自己的研究并尝试了
vba - 加快 VBA 中按钮格式化的速度
我有下面的代码，将所有按钮(有 10 个)着色为灰色，以清除任何先前着色的按钮，然后将所选按钮着色为蓝色。基本上充当当前选择哪个按钮的指示器。我注意到代码现在需要一些时间才能通过这种修饰添加来运行，我
vba - 加快 VBA 代码运行速度
我有一个 Excel 工作簿，用户通过单击按钮导入文本文件。我的代码完全按照我的需要工作，但是在填写 H 列“阅读日期”时速度非常慢。将文本文件导入 Excel 工作表后，我的 Excel 工作簿如下

首页

博学

6Ren·AI

商城

javascript - Canvas 的 fps 无意中加快了速度？