Question

我正在使用画布作为渲染器来实现游戏，在某些情况下，渲染帧之间似乎有过多的“等待”，我不知道该怎么想。

在过去的几周中，我一直在努力，在大多数情况下，并没有真正的问题。但是，当屏幕上有很多东西时，出于某种原因就会出现“等待”。

performance metrics

在调用“复合层”之前，它花费的时间与渲染代码所花费的时间大致相同。我不知道这是我可以避免的事情，还是仅仅是我必须忍受的事情。无论如何，我只能到达极端情况下低于60 fps的地步。

另一个例子： another example index.js

window.onload = () => {
    const width = 1280;
    const height = 720;
    const canvas = document.getElementById("game-canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");

    function renderLoop() {
        console.time("render");
        // Do render and request next frame
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < 13000; i++) {
            // Not real code this is just to demonstrate the issue
            ctx.fillRect(i % width, 10 * Math.floor(i / (width)), 10, 10);
        }

        console.timeEnd("render");
        requestAnimationFrame(renderLoop);
    }

    requestAnimationFrame(renderLoop);
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      canvas {
        border: 2px solid black;
        display: inline-block;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <script src="./index.js"></script>
    <canvas id="game-canvas"></canvas>
  </body>
</html>

为什么在动画代码和下一个动画帧之间需要那么多时间？

0 个答案: