Canvas arc（）vs drawImage（）

Question

这可能看起来无害，但是当以每秒30帧的速度进行1000次以上时，它确实会增加。我绘制了3种尺寸的圆形，每种圆形都有自己的填充颜色（RGBA）。我将它们作为图像绘制一次，将drawImage()与数据网址一起使用，或者为每个图片做arc()是否更快？

额外信息：

• 为所有圈子使用单个画布
• 缓存上下文和画布

• 目前对弧的完全调用看起来像是

  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>元素作为参数，而在Firefox中，使用<img>标记的速度更快，但其他浏览器显示了对面。

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

Answer 2

drawImage()速度更快，但仅限于Firefox。

有一种技巧可以使Chrome在drawImage()中获得与Firefox相同的性能：

const drawCircle = function(ctx, x, y, radius) {
  ctx.lineWidth = radius * 2;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y);
  ctx.stroke();
}

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

有趣的是，Firefox 79恰好相反：该技巧被认为是最慢的选择，而arc只是快一点。

我使用的测试是here。