Javascript HTML5<；画布>；：drawImage（）的性能影响

我想知道在动态创建的画布（即document.createElement（“画布”））上使用drawImage（）与在DOM中已经创建的画布（即HTML页面上的标记）是否有性能差异

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

将一组对象绘制到内存中的画布上，然后再最终绘制到“主”画布上，会比直接绘制到后者的成本更高吗？我觉得最好有多张画布，至少是为了组织目的

---

相关：如果只绘制画布的一部分，画布的大小会影响性能吗？

谈到Chrome和Firefox，我找不到静态和动态画布元素之间的任何区别。主要是drawImage（）句柄的像素数量使其速度变慢+当前的GlobalComposite操作（复制、源代码切换速度最快）。但是，浏览器必须呈现整个页面，因此在画布下方放置拉伸的（背景）图像不是一个好主意

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

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

在1024x600像素的1GHz上网本上，全屏drawImage（）大约需要10秒。重复两次意味着无法实现50Hz的显示速率。如果你瞄准iPhone或Android智能手机，情况会变得更糟

不需要使用canvas来完成旧的双缓冲，它已经实现了。您可以随时只更新画布元素的相关（脏）子部分，并获得必要的毫秒

---

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

感谢您提供的详细答案！我想一些实验已经准备好了，就像许多新的（ish）特性一样。