Canvas arc()vs drawImage()

Question

这可能看起来无害,但是当以每秒30帧的速度进行1000次以上时,它确实会增加.我绘制了3种尺寸的圆圈,每种圆圈都有自己的填充颜色(RGBA).我将它们作为图像绘制一次,并drawImage()与数据URL一起使用,或者arc()为每个图像做些什么？

额外的信息:

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

• 此刻完全呼吁弧线看起来像

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

Answer 1

根据我的测试,drawImage()在大多数情况下,使用速度要快得多arc().

该drawImage()函数可以使用<img>或<canvas>元素作为其参数,并且在Firefox中,使用<img>标记更快,尽管其他浏览器显示相反的情况.

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