我想知道在动态创建的画布（即document.createElement（“canvas”））上使用drawImage（）与在DOM中创建的画布（即HTML页面上的标签）之间是否存在任何性能差异。
我的想法是drawImage（）的“慢”部分发生在它实际上必须向用户显示视觉效果时，尽管我可能错了（找不到太多关于此的信息）。
将一组对象绘制到内存中的画布，然后最终绘制到“主”画布而不是直接绘制到后者，会花费多少钱吗？我觉得拥有多个画布会更好，至少是出于组织目的。
相关：如果您只是绘制它的子部分，画布的大小会影响性能吗？
答案 0 :(得分：3)
谈论Chrome和Firefox我发现静态和动态画布元素之间没有任何区别。主要是像素数量drawImage（）处理使它变慢+当前的globalCompositeOperation（复制，源代码最快）。但是，浏览器必须呈现整页，因此在画布下放置拉伸（背景）图像是个坏主意。
画布属性width / height与其样式width / height属性之间存在差异。您可能有300 * 200像素的画布，样式大小设置为100％。然后内部绘制速度与浏览器窗口大小相同。当然，显示质量是一个问题。
您可能希望将绘图（线条，方框，圆弧等）与blitting（drawImage）分开，并找出在应用程序中消耗更多时间的内容。只要不需要多个画布（图像处理，混合视频等），尽量避免使用drawImage（）。您的代码 - 而不是元素 - 应该可以帮助您处理“组织目的”。
1 GHZ上网本（1024x600像素）的全屏drawImage（）大约需要10毫秒。两次这样做意味着无法实现50Hz的显示速率。如果您定位iPhone或Android智能手机，事情会变得更糟。
没有必要使用canvas进行良好的旧双缓冲，它已经实现了。您可以随时更新canvas元素的相关（脏）子部分，并获得必要的msecs。
不是使用多个画布，而是选择在不同的部分对一个巨大的画布执行所有不可见的操作 - drawImage（）与目标和源相同。在调试时更容易看到发生了什么。