HTML 5页面上的多个画布元素

Question

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

拥有多个画布和其中的一个图像，会影响或降低页面的性能吗？

Answer 1

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

有关更多信息，请访问：HTML5 multiple canvas on a single page

Answer 2

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

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

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

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