是否需要太多画布来重绘游戏循环内的所有内容？

Question

我在 Canvas 中开始了打砖块游戏。

目前，我只对块和播放器的显示进行了编码。

当游戏需要自我更新（每 10 毫秒左右）时，它需要调用 draw() ，它当前将根据玩家、块和球的当前状态重新绘制整个画布。

它的性能开始成为一个问题。

每帧重新绘制整个画布不是一个好主意吗？我是否应该更改代码以仅绘制正在更改的部分？

Answer 1

首先：是的，更改代码以仅绘制正在更改的部分可能会有很大帮助，但您应该始终使用自己的代码测试特定的改进，因为任何一项优化的性能都会因应用程序而异（有时很大）。

但导致速度缓慢的不仅仅是绘图。例如，请确保您不会重新计算/重建绘图循环中永远不会改变的任何内容。

另外，如果您有很多对象，除非必要，否则不要设置 fillStyle，这意味着可以通过将填充设置为一种颜色来绘制该颜色的所有对象来进行优化，然后设置第二个填充颜色等。

最后，我建议编写整个游戏（或大部分），然后返回并进行优化。

Canvas 需要进行大量优化。我最近开始编写一本关于游戏相关性能增强的指南，希望能在今年年底完成。

Answer 2

你必须尝试确定，但我不同意这里的两个答案。在我的简单测试中，尝试清除并重绘画布的特定区域会产生稍差的性能，而不是更好。

您可以在这里看到我的测试： http://phrogz.net/tmp/image_move_sprites_canvas.html

这不过，这取决于您的需求。如果您有数百个不需要更新的项目，并且画布中只有一小部分会更改每个帧，那么也许只清除并重新绘制该部分会很好。

Answer 3

每帧重新绘制整个画布不是一个好主意吗？

不，有时这是个好主意

它的性能开始成为一个问题

，但不是那时。

尽管如此，您的代码并没有那么复杂，也没有什么会导致明显的大规模减速。您如何衡量其性能？

Answer 4

首先，我将从 init() 中取出所有这些：

canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 300;
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

没有必要每毫秒都处理它！

其次，看看这个： http://paulirish.com/2011/requestanimationframe-for-智能动画/