我正在构建一个基于 Canvas 的游戏，该游戏将涉及相当数量的 Sprite 在运动时相互重叠。我的目标是移动设备，因此性能是一个问题。
在我的例子中，基本上有两种方法可以在 Canvas 上设置 Sprite 动画:
- 在至少有一个 Sprite 移动/更改的每一帧上删除整个 Canvas ，然后重绘一切。据我所知，这听起来很标准。
- 仅删除那些已移动/更改的 Sprite ，并仅重绘那些已移动/更改的 Sprite 以及那些与已移动/更改的 Sprite 重叠的 Sprite 。删除那些已移动/更改的 sprite 会从它们重叠的 sprite 中切出 block ，因此需要重绘重叠的 sprite。
天真地，听起来第二种选择会产生更好的性能。更少的绘制操作等于机器必须做的更少的工作，对吗？但是，第一个选项(可能)每帧调用一次 clearRect()，而第二个选项每帧调用多次 clearRect()(尽管每个调用都针对一个小得多的矩形)。更不用说确定的开销了需要删除的内容以及与刚刚删除的内容重叠的内容。
所以，经过一番思考，我不确定哪个会更快。我敢肯定在某些情况下第二个选项会更快，而且我想在某些情况下第一个选项会更快。
现在有什么方法可以确定哪个选项更快？还是我最好的选择是同时实现它并进行一些基准测试？
最佳答案
我在较小的范围内处理过同样的问题，当我意识到您可以将不同的绘制元素分离到彼此重叠的不同 Canvas 上时，我有一个拍脑袋的时刻!
一张 Canvas 用于背景，一张用于 Angular 色 Sprite 等。
查看 this question 的答案用于处理这种绘图风格的完整框架。
关于javascript - 什么时候清除整个 Canvas 更快？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13783691/