如何在 HTML5 Canvas 中丢帧答案

【问题标题】：How to drop Frames in HTML5 Canvas如何在 HTML5 Canvas 中丢帧
【发布时间】：2013-03-17 05:28:13
【问题描述】：

我正在用画布元素制作一个 HTML5 小游戏。它在大多数计算机上运行良好，但在其他计算机上却落后。但是，它不会跳过帧，它会继续渲染每一帧并且游戏会变慢。我正在尝试编写一个函数来跳过帧，但我想不出一个公式来做到这一点。

我试过四处寻找，但一无所获。

我有一个渲染游戏的函数叫做渲染，它在这样的循环中：

var renderTimer = setInterval("render(ctx)", 1000/CANVAS_FPS);

render()
{
/* render code here */
}

感谢您的帮助，布兰登·菲佛

【问题讨论】：

标签： javascript html canvas frame-rate

【解决方案1】：

此模式可让您在已知速度较慢的计算机上跳过帧

var isSlowComputer=true;
var FrameSkipper=5;

function render(){

    // if this is a slow computer
    // just draw every 5th frame
    if(isSlowComputer && --FrameSkipper>0){ return; }

    // reset the frame skipper
    FrameSkipper=5;

    // draw your frame now

}

【讨论】：

【解决方案2】：

如果您的目标市场是使用支持 HTML5 的浏览器的人，您可以使用 window.requestAnimationFrame。这允许您将所有渲染逻辑绑定在一个简单的地方，并且只有在必须时才会减慢速度。它将努力达到每帧分配 16 毫秒，从而使您达到 60 fps。

var canvas = document.getElementById("#canvas"); (function drawFrame(){ window.requestAnimationFrame(drawFrame, canvas); // your main code would fire off here }()); 只要你让浏览器算出你的帧率，你就可以了。

我之前使用画布写过一些不同的体验，但在我使用 requestAnimationFrame 之前，情况有些不稳定。

要记住的另一件事是双缓冲区。如果您要在任何给定时刻在屏幕上写很多东西，我发现将它们全部写到第二个隐藏的画布元素中会更容易，然后只需使用context.drawImg(buffer,0,0); 就可以摆脱很多麻烦.只要您认为通过画布的代码即使在压力很大的情况下也不应该变得不稳定。

祝你好运

【讨论】：