Performance Canvas arc（）与drawImage（）的比较

这看起来似乎是无害的，但如果以每秒30帧的速度执行1000多次以上的操作，它确实会累加起来。我画了3种大小的圆，每种都有自己的填充颜色（RGBA）。对我来说，将它们作为图像绘制一次，并使用数据URL使用

drawImage（）

，或者对它们中的每一个执行

arc（）

，速度更快吗

额外资料：

• 对所有圆使用单个画布
• 上下文和画布被缓存
• 目前arc的全面呼吁看起来像
  this.scene.context.arc（newLocation，this.y+=this.speed/80，this.distance/2，0，Math.PI*2，false）

据介绍，

drawImage（）

在大多数情况下比使用

arc（）

要快得多

drawImage（）

函数可以将

或

元素作为其参数，在Firefox中，使用

标记更快，尽管其他浏览器显示了相反的结果

归结起来就是：即使对于简单的形状，使用

drawImage（）

drawImage（）

也更快，但仅在Firefox中使用

Chrome中有一个技巧可以提供与Firefox中相同的性能：

const drawCircle=函数（ctx，x，y，半径）{
ctx.lineWidth=半径*2；
ctx.lineCap='圆形'；
ctx.beginPath（）；
ctx.moveTo（x，y）；
ctx.lineTo（x，y）；
ctx.stroke（）；
}

在Chrome 84中，这种使用圆线帽的方法比其他方法快3倍左右：

有趣的是，Firefox79正好相反：这是最慢的选择，arc只快一点

---

我使用的测试是。

如果您已经有了代码，您可以检查哪个版本更快，如果您最终使用arc（）方法，您可以优化该行。例如，如果在函数中，则将上下文设置为局部变量，或者仅设置为变量，这样就不必同时查找“this”和“scene”，只需进行一次计算。Eg var TWOPI=Math.PI*2