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

Question

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

我的想法是drawImage（）的“慢”部分发生在它实际上必须向用户显示视觉效果时，尽管我可能是错的（找不到太多关于此的信息）。

将一组对象绘制到内存中的画布然后最终绘制到“主”画布而不是直接绘制到后者是否会显得更加昂贵？ 我觉得拥有多个画布会更好，至少是出于组织目的。

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

Answer 1

谈论Chrome和Firefox我发现静态和动态画布元素之间没有任何区别。 主要是像素数量drawImage（）处理使它变慢+当前的globalCompositeOperation（复制，源代码最快）。 但是，浏览器必须呈现整页，因此在画布下放置拉伸（背景）图像是个坏主意。

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

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

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

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

而不是使用多个画布，有一个选项可以对不同部分中的巨大操作执行所有不可见操作 - drawImage（）与目标和源相同。 在调试时更容易看到发生了什么。