单个页面上的 HTML5 多个画布答案

【问题标题】：HTML5 multiple canvas on a single page单个页面上的 HTML5 多个画布
【发布时间】：2011-04-30 13:44:09
【问题描述】：

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

【问题讨论】：

标签： html canvas

【解决方案1】：

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

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

【讨论】：

我目前在这篇文章中看不到这个具体的引用，Great WayBack Machine 还没有存档它:(。它随着时间的推移从那里被删除了？为什么？
@shaman.sir 可以在这里找到：web.archive.org/web/20120106035725/http://diveintohtml5.ep.io/…
教程不错，但是我在里面找不到与多个画布相关的内容。

【解决方案2】：

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

【讨论】：

【解决方案3】：

有时多个画布会带来更好的性能。最好测试一下你是否有时间。

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

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

如果您愿意，您可以等待完成所有绘图，直到页面的其余部分从onLoad 函数中启动。

【讨论】：