HTML5单页多画布

如果我们在一个html页面上使用多个

，是否会影响正在开发的应用程序的性能，并且代码是否变得非常庞大，需要更多的时间来加载页面？

我在同一页面上使用了几十个画布，使用javascript图形库显示不同的图形。这些图表相当快，在我们的例子中，为它们收集数据有点慢

---

如果需要，您可以通过从

onLoad

功能启动来等待完成所有绘图，直到页面的其余部分加载。

单个实例运行平稳，其他实例不会影响页面上的渲染。数据是减慢速度的因素。为了增加页面加载时间，只需在页面加载后调用画布呈现方法即可

有时多张画布会带来更好的表现。最好测试一下你是否有时间

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

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

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

---

其他时候，您可能希望背景很少发生变化，而前景对象一直在变化。与以每秒60帧的速度重画所有对象不同，您创建了一个背景画布和前景画布，并且只以最快的速度重画前景对象。在这里，两张画布应该比一张更有效，但最好将背景画布“缓存”为图像，并在每一帧中首先绘制图像。

根据Mark Pilgrim的说法，使用多张画布是个好主意

看

---

通过隔离屏幕区域以更新和隔离输入事件，使用多个画布可以简化您的工作。如果您的页面非常适合划分屏幕区域，我建议您这样做。

此外，这是一种最佳方法。

您说过：使用javascript图形库。你能告诉我这个的名字吗？我在这篇文章中看不到这个具体的引用，而且伟大的回程机器也没有存档它：（.随着时间的推移，它被删除了？为什么？@saman.sir这里有：这是一个很好的教程，但我在那里找不到任何与多个画布相关的内容。通常情况下？那么在什么情况下多个画布会导致更差的性能？在非常大的画布上，只需重新绘制简单的背景和前景可能会更好场景（或将其保存到图像）比拥有3张以上的大型画布要好。