HTML 5 页面上的多个 Canvas 元素答案

【问题标题】：Multiple Canvas Elements on a HTML 5 pageHTML 5 页面上的多个 Canvas 元素
【发布时间】：2012-09-26 09:20:04
【问题描述】：

我可以在一个 HTML 5 页面上有多个画布，每个画布上都有一个图像吗？我基本上需要在我的应用程序的所有图像上使用JS manipulation Plugin，这个插件要求图像在画布上。

在其中包含多个画布和一个图像会影响或减慢页面的性能吗？

【问题讨论】：

【解决方案1】：

是的，您可以拥有多个画布元素。您的页面的性能不会因为有多个画布而受到影响。影响你表现的是画布的重绘。至于图像，决定性能的是需要进行多少重绘。

【讨论】：

【解决方案2】：

Canvas 元素的重绘速度非常快。它比 SVG 快得多，这使得它作为 Web 开发的绘图工具非常有效。

您可以使用任意数量的画布，它们不会对您的页面性能产生负面影响。

此外，画布元素是在整个页面中加载的，但是加载图像并在画布中绘制的代码通常是在页面完全加载后执行，所以唯一会减慢页面性能的是您在不同画布元素中所做的事情，而不是您在页面中使用的这些元素的数量。此外，如果您在页面加载后开始绘图，那么无论您在画布元素上做什么，因为当您开始绘图时页面将完全加载。

请记住，javascript 用于在画布上绘图。如果您使用繁重的过程来制作绘图，您会发现一幅画布绘图会阻塞另一幅，直到它完成。尝试以较少阻塞的方式构建您的绘图代码，以避免这种情况。

【讨论】：