HTML5 <canvas>：drawImage（）的性能影响

Question

我想知道在动态创建的画布上使用drawImage（）（例如document.createElement（“canvas”））与在DOM中创建的画布之间是否存在性能差异（即HTML页面上的标签）。

我的想法是，当drawImage（）实际上需要向用户显示视觉效果时，会出现“slow”部分，尽管我可能是错的（无法找到太多的信息）。

将一组对象绘制到内存中的画布上，然后最后绘制到“主”画布上，而不是直接绘制到后者上，会花费更多吗？我觉得最好有多个画布，至少是为了组织目的。

相关：如果您只是绘制它的一个子部分，画布的大小是否会影响性能？

Answer 1

谈论Chrome和Firefox我无法在静态和动态画布元素之间找到任何区别。主要是像素drawImage（）句柄的数量使其缓慢+当前globalCompositeOperation（复制，源代码最快）。但是，浏览器必须渲染完整页面，因此在画布下放置拉伸（背景）图像是个不错的主意。

画布属性宽度/高度与其样式宽度/高度属性之间存在差异。您可能有一个300 * 200像素的画布，样式大小设置为100％。然后，内部绘图速度与浏览器窗口大小相同。当然，显示质量是一个问题。

您可能想要从blitting（drawImage）中分离图形（线条，框，弧等），并找出在应用程序中消耗更多时间的内容。只要不需要多个画布（图像处理，混合视频等），就尽量避免使用drawImage（）。你的代码 - 而不是元素 - 应该可以帮助你处理“组织目的”。

在1024x600像素的1 GHZ上网本上的全屏drawImage（）大约需要10毫秒。这样做两次意味着无法达到50Hz的显示速率。如果您定位iPhone或Android智能手机，情况会变得更糟。

没有必要使用canvas进行良好的双缓冲，它已经实现。您可以随时更新画布元素的相关（脏）子部分，并随时获得必要的msecs。

除了使用多个画布外，还有一个选项可以在不同部分的巨大区域上执行所有不可见操作 - drawImage（）与目标和源代码相同。那么查看调试过程中发生的情况会更容易。