Javascript 是不是需要太多的画布来重新绘制游戏循环中的所有内容？

目前，我只对方块和球员的显示进行了编码

当游戏需要更新自身时（大约每10毫秒），它需要调用

draw（）

，该函数当前将根据玩家、方块和球的当前状态重新绘制整个画布

它的表现开始成为一个问题

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

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

不，有时候这是个很好的主意

它的表现开始成为一个问题

但那时候不行

---

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

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

但这并不是唯一会导致缓慢的绘画。例如，请确保在绘制循环中没有重新计算/重建任何永不更改的内容

另外，如果有很多对象，除非必须设置，否则不要设置

fillStyle

，这意味着要进行优化，可以将填充设置为一种颜色，绘制该颜色的所有对象，然后设置第二种填充颜色，等等

最后，我建议写下你的整个游戏（或者大部分），然后回去做优化

---

画布上有大量的优化。我最近开始编写一本关于游戏相关性能增强的指南，希望能在年底前完成。

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

你可以在这里看到我的测试：

---

然而，这取决于你的需要。如果您有数百个不需要更新的项目，并且每一帧只更改画布的一小部分，那么仅清除和重画该部分可能会很好。

首先，我将从init（）中删除所有这些内容：

每毫秒处理一次都没有意义

---

其次，看看这个：

为什么要以100fps刷新画布？我想30帧就足够了。@BlueRaja不知道，我只是在写问题时选择了这个数字。我是一个画布/游戏开发新手。我最终得到：）有趣的结果。。。在测试类似的渲染方法时，我发现情况完全相反。我所看到的与我的主要区别是，我直接使用画布的图像数据——getImageData和putImageData，而不是像你这样从图像中绘制。@Jani非常惊讶，因为我的测试显示，

get/putImageData

是。不过我绘制的图像非常简单，因此，也许这对它的表现有影响。在我看来，这是一个最好的总结。一开始不要太担心优化——完全忽略它是不明智的，但也不要太担心。要记住的其他JS性能瓶颈是函数调用（执行很多函数调用都比内联慢，还有Math.round和使用位移位到round等等），从DOM元素读取内容（如果可以避免，就永远不要这样做，总是存储在变量中）-我在这里写了一些提示：谢谢，但是

init（）

会被调用一次

draw（）

是更新画布的方法。感谢您的回答。我在Chrome上测试时打开了大约15个标签，所以这很可能是我看到的减速的一个因素：）

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