HTML5 <canvas>：drawImage()的性能影响

Question

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

我认为，drawImage（）的“慢”部分是当它实际向用户显示可视化内容时发生的，但我可能错了（找不到太多关于这个的信息）。

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

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

- Illianthe

Answer 1

谈到Chrome和Firefox，我无法找到静态和动态画布元素之间的任何区别。主要是drawImage()处理的像素数量使它变慢+当前的globalCompositeOperation（复制，source-over最快）。但是，浏览器必须呈现整个页面，因此在画布下放置拉伸的（背景）图像是一个不好的主意。

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

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

在1024x600像素的1 GHZ Netbook上进行全屏drawImage()大约需要10毫秒。如果做两次，就没有办法实现50Hz的显示速率。如果你的目标是iPhone或Android智能手机，情况会变得更糟。

在canvas中不需要进行双缓冲，因为它已经实现了。您可以自由地在需要时仅更新画布元素的相关（脏）子部分，并获得必要的毫秒数。

与使用多个画布不同，有一种选择是在一个巨大的画布上的不同部分执行所有不可见操作-使用相同的目标和源进行drawImage()。这样更容易在调试时看到发生了什么。

- Torsten Becker

---

感谢您提供详细的答案！我想进行一些实验，这是在许多新功能中常见的情况。 - Illianthe