javascript-为什么在画布上填充矩形会缓慢降低性能？

我目前正在研究使用< canvas>元件.随着时间的流逝,我神秘地在程序中遭受性能下降的困扰,并希望您能解释一下这种行为.

我已将问题追溯到一个绘制每个框架背景的函数.根据要点显示为：

function paintBackground() {
  ctx.rect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = "black"
  ctx.fill()
}

我还设置了一个代表这种情况的JSFiddle.

关于这段代码的有趣之处在于,当对其进行测量时,它的效率逐渐降低了几个数量级.以JSFiddle为例,该函数以不到一毫秒的时间完成.大约2-3秒后,它报告现在大约需要1毫秒.大约10秒钟,现在平均在2-3毫秒之间.一分钟内平均大约6到7毫秒,而当我让它运行大约5分钟时,则高达13到14毫秒.这比启动时要慢数百％,并且没有任何变化！我已经在IE 11和Firefox 35.0.1中测试了相同的代码段.两者都显示出相同的降级效果,但是在Firefox中似乎下降得更快.

现在,我不是一个对微优化大惊小怪的人,但是我的目标是达到稳定的60FPS,这意味着我只有大约16.67ms的渲染和更新时间,而仅通过渲染,我基本上就逐渐失去了一半背景！我还担心这可能是一场失控的火车,谁知道性能会如何下降？可能使我的游戏无法玩.

据我所知,这是导致性能下降的唯一因素,其原因有两个：1)游戏代码的其余部分运行平稳,包括渲染构成一个关卡的所有图块(每帧375个图块)和2)即使在提供的JSFiddle中,除了矩形填充之外,我都没有遇到这种行为.

关于此行为的任何解释或建议都将非常有启发性！

附言我知道这听起来很愚蠢,但是其他人会遇到这种行为吗？还是只有我？我应该注意,尽管我的CPU速度很慢(1.4GHz双核),但这一点很明显.

解决方法:

rect()命令将添加到路径并累加,因此每次调用fill()时,所有先前的rect都将被填充.

用以下两种方法之一解决：

function paintBackground() {
  ctx.beginPath(); // RESET path here
  ctx.rect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "black";
  ctx.fill();
}

或直接填写而不使用路径：

function paintBackground() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

也可以使用requestAnimationFrame获得更好的动画.

Modified fiddle

附：不要忘了半列.

相关推荐