单页上的HTML5多个画布

Question

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

Answer 1

有时多个画布会带来更好的性能。最好测试你是否能负担得起时间。

假设您正在制作一个程序，其中包含屏幕上的项目，并允许用户绘制选择框。

使用一个画布，要绘制选择框，您必须反复重绘所有元素以更新用户看到的选择框，因为它们都在同一个画布上。

或者，您可以拥有两个画布，一个包含对象，另一个在前面用于“工具”（如选择框图形）。这两幅画布可能更有效率。

其他时候，您可能希望背景变化很少，前景对象会一直变化。您可以制作背景画布和前景画布，而不是以每秒60帧的速度重新绘制所有画布，并且只能以快速重绘前景的对象。这里有两个画布应该比一个画布效率更高，但将背景画布“缓存”为图像并在每帧首先绘制图像可能更为理想。

Answer 2

我在同一页面上使用过几十幅画布，使用javascript图形库显示不同的图形。这些图表非常快，它们收集的数据在我们的情况下有点慢。

如果你想要，可以等到页面的其余部分加载，然后从onLoad函数开始加载，就可以等到你的所有绘图。

Answer 3

据Mark Pilgrim所说，使用多幅画布是个好主意。

请参阅This Link

通过隔离屏幕区域来更新和隔离输入事件，使用多个画布可以简化您的工作。如果您的页面非常适合屏幕的分割区域，我会说它去了。

Answer 4

另外，HTML5Rocks says这是最好的方法。

Answer 5

单个实例运行流畅，更多不影响页面呈现。数据是减慢画布速度的因素。为了增加页面加载时间，您可以在页面加载后简单地调用画布渲染方法。