Javascript - 无法调整帧率 - requestanimationframe

Question

开始循环

function gameLoop(){
   update();
   draw();
   requestAnimFrame(gameLoop);
}

var requestAnimFrame =  window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 1);
                    };

1. 我无法调整帧速率。它总是非常快。为什么我不能将其更改为每秒 1 帧。我想这样做只是为了测试目的。
2. 我每次都必须清除 Canvas 吗？它似乎在不清除它的情况下工作良好。

谢谢。

这里是完整代码的 fiddle 链接: complete code

谢谢

Answer 1

rAF 锁定到监视器的同步，通常为 60 Hz，因此我们无法自行调整 FPS(浏览器可能会在选项卡处于非事件状态或使用电池时降低 FPS)。

此外，您要更改的是 poly-fill 的后备；也就是说:如果浏览器不支持 rAF，它将改为使用 setTimeout。然而，如今大多数浏览器确实支持 rAF(甚至没有前缀)，因此永远不会使用 setTimeout。

你可以做两件事:

• 直接使用 setTimeout 替换循环中的 rAF(测试时)

例子:

var FPS = 1;

function testLoop() {

    ... ordinary code

    setTimeout(testLoop, 1000/FPS);
}

• 使用计数器调节 rAF:

例子:

var framesToSkip = 60,
    counter = 0;

function loop() {

    if (counter < framesToSkip) {
        counter++;
        requestAnimationFrame(loop);
        return;
    }

    /// do regular stuff

    counter = 0;
    requestAnimationFrame(loop);
}

MODIFIED FIDDLE HERE

很可能有更好的方法来实现节流，但我只是想展示基本原理。这仍将以 60 FPS 全速运行，但您的代码将执行最少的操作，并且只有当计数器达到其计数时，它才会执行主代码。

如果您接下来绘制的内容会覆盖之前绘制的内容，或者您​​当然想保留它，则无需每次都清除 Canvas 。如果需要，您还可以清除一部分以进一步优化。