在绘制HTML5画布之前剪裁上下文能提高性能吗？

Question

我正在研究一种HTML5游戏框架的工作原理，并且想了解它所做的一项特定优化。

该框架跟踪屏幕上可能发生更改的“脏”区域。如果实体与这样的区域重叠，则会重新绘制。然而，首先上下文被剪辑为仅包含脏区域。

这比简单地重新绘制整个图像快吗？如果实体是通过更复杂的画布命令渲染的呢？

e：经过进一步思考，我意识到在游戏框架的上下文中，裁剪是至关重要的，无论性能如何。不过，我还是有点好奇，所以我将保留这个问题。

- starwed

---

有趣的问题。期待看到答案/建议。 - Harsha Venkataramu

出于好奇，为什么我的上一个问题被编辑掉了？ - starwed

我认为这取决于很多因素，包括显卡和JS引擎。例如，在Firefox中频繁操作上下文可能会对性能产生严重影响，但在Chrome中则没有问题。 - Matt Greer

在我处理画布的经验中，最昂贵的操作是在上下文中进行实际绘制调用。在活动剪辑区域之外对画布执行的操作应该被渲染器完全忽略。如果实体很大，只有一小部分接触到脏区域，例如需要重新绘制的大型背景（例如动画瓷砖地图），忽略脏区域之外的所有内容将显着提高性能。 - chris-mv

Answer 1

一方面，通过不渲染与脏区域不相交的实体，您可以节省时间。但是，另一方面，使用剪辑的画布操作会更慢。

一些浏览器（如Chrome）跟踪您绘制的画布区域，并仅更新屏幕的该部分。这也可以节省一些时间。

因此，是否可以帮助取决于脏区域有多大（如果脏区域几乎与整个画布一样大，则重新绘制所有内容而不进行剪辑更快），以及您拥有多少对象（您拥有的越多，您可以节省的时间就越多）。我想大多数情况下值得这样做。每帧重新绘制所有内容肯定非常慢。

- Egorinsk