performance - Canvas arc() 与 drawImage()

Question

这可能看起来无害，但是当以每秒 30 帧的速度执行 1000 多次时，它确实加起来了。我画了 3 种大小的圆圈，每个圆圈都有自己的填充颜色 (RGBA)。我将它们绘制为图像一次并使用 drawImage() 是否更快？与数据 URLs，或做 arc()对于他们每个人？

额外的信息:

对所有圆圈使用单个 Canvas

缓存上下文和 Canvas

目前对弧的完整调用看起来像

this.scene.context.arc(newLocation, this.y+=this.speed/80, this.distance/2, 0, Math.PI*2, false);

Answer 1

根据 my tests , drawImage()在大多数情况下会比使用 arc() 快得多.
drawImage()函数可以采用 <img>或 <canvas> element 作为其参数，在 Firefox 中，使用 <img>标签更快，尽管其他浏览器显示相反。

归结为:即使是简单的形状，使用 drawImage()