Javascript – 无法调整FrameRate – requestanimationframe

我开始循环

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帧.我想这样做只是为了测试目的.
>我每次都要清除画布吗？看起来好像没有清除它.

谢谢.

以下是完整代码的小提琴链接：
complete code

谢谢

解决方法

rAF被锁定到监视器的同步,通常为60 Hz,因此我们无法自己调整FPS(浏览器可能会在标签无效或电池时降低FPS).

此外,您正在尝试改变的是多面体填充的回退;也就是说：如果浏览器不支持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,但您的代码将执行最少的操作,只有当计数器达到计数时,它将执行主代码.

你不需要每次清除画布,如果下一个画面将覆盖以前绘制的内容,或者如果你想保留它当然.如果需要,您还可以清除一部分进一步优化.