单个页面上的 HTML5 多个画​​布

Question

如果我们使用多个 <canvas>在单个 html 页面上是否会影响正在开发的应用程序的性能，代码是否变得非常庞大并且需要更多时间来加载页面？

Answer 1

有时多个 Canvas 会带来更好的性能。如果您有时间，最好测试一下。

假设您正在制作一个在屏幕上显示项目并允许用户绘制选择框的程序。

如果使用一个 Canvas ，要绘制选择框，您必须一遍又一遍地重新绘制所有元素以更新用户看到的选择框，因为它们都在同一个 Canvas 上。

或者，您可以有两个 Canvas ，一个带有对象，另一个在前面用于“工具”之类的东西(例如选择框图形)。这里两个 Canvas 可能更有效。

其他时候，您可能希望背景很​​少变化，而前景对象一直在变化。不是以每秒 60 帧的速度重新绘制所有这些对象，而是创建一个背景 Canvas 和前景 Canvas ，并且仅以较快的速度重新绘制前景的对象。这里两个 Canvas 应该比一个更有效，但将背景 Canvas “缓存”为图像并在每一帧首先绘制图像可能更优化。