javascript - HTML5 Canvas fillRect 慢

Question

我正在尝试使用 HTML5 画布编写一个简单的光线投射器，但帧速率却非常糟糕。Firefox 的分析器报告说我 80% 的运行时间都花在了 context2d.fillRect() 中，我在地板和天花板的每列以及纹理墙壁上的每个像素中都使用了它。我遇到了这个问题，发现 fillRect 在 chrome 上比 1x1 px 图片快 40%，在 firefox 上快 4%。他们提到它仍然在计算 alpha 的东西，尽管我假设如果 alpha 为 1，它会通过不透明渲染？是否有任何其他方法可以使用 javascript 进行大量矩形和像素位块处理，我应该尝试一下？

Answer 1

您可以尝试两种解决方案来减少渲染的 CPU 使用率。

尝试使用 requestAnimationFrame 以便您的浏览器在准备就绪时渲染您的画布图形，尤其是仅当用户在浏览器中打开画布选项卡时。更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

第二种解决方案，取决于您的部分或全部内容是动态的，是使用 JavaScript 在内存中的其他“隐藏”画布上预渲染画布的部分（例如，您将主画布分成 4 个子画布，然后只需在屏幕上绘制 4 个元素）。

PS：如果你在 Mac 上使用 Firefox 结合多个画布渲染将比 Chrome 提高你的 CPU 使用率

希望这可以帮助

Answer 2

我发现的一个解决方案是每次调用它时将 fillRect() 调用放在路径中：

canvasContext.beginPath();
canvasContext.rect(1, 1, 10, 10);
canvasContext.fill();
canvasContext.closePath();

似乎对 rect() 的调用会添加到先前 rect() 调用的路径中，如果使用不正确，这可能会导致内存泄漏或资源使用量的增加。