javascript - 在绘制之前剪辑上下文可以帮助 HTML5 画布性能吗？

Question

我正在研究 HTML5 游戏框架的工作原理，并且想知道它所做的特定优化。

该框架跟踪可能已更改的屏幕“脏”区域。如果实体与这样的区域重叠，则重新绘制它。然而，首先，上下文仅被裁剪到脏区。

这比简单地重绘整个图像更快吗？如果实体是通过一系列更复杂的画布命令呈现的呢？

e：再想一想之后，我意识到无论性能如何，剪辑在游戏框架的上下文中都是至关重要的，这是有原因的。不过，我仍然对此有点好奇，所以我将把这个问题留在原样。

Answer 1

好吧，一方面，您可以通过不渲染不与脏区相交的实体来节省时间。但是，另一方面，您会浪费时间，因为带有剪裁的画布操作速度较慢。

某些浏览器 (Chrome) 会跟踪您绘制的画布区域并仅更新屏幕的该部分。它还节省了一些时间。

因此，这样的事情是否有帮助取决于脏区有多大（如果脏区几乎与整个画布一样大，那么在不剪裁的情况下重绘所有内容会更快）以及您拥有多少对象（您拥有的时间越多，您的时间越多）可以保存）。我想大多数时候这是值得的。每帧重绘所有东西一定很慢。