为什么在画布上填充长方形会慢慢降低性能？

Question

我目前正在开发一个利用HTML5元素的<canvas>游戏。随着时间的推移，我在程序中莫名其妙地遭受性能下降，并希望您能够解释这种行为。

我把这个问题追溯到了一个函数，它描绘了每一帧的背景。在要点中，它似乎是：

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

我还设置了一个表示此场景的JSFiddle。

这段代码的有趣之处在于，当进行测量时，它的效率会随着数量级的降低而逐渐降低。以JSFiddle为例，它以小于1毫秒的函数开始。大约2-3秒后，它报告说现在大约需要1毫秒。大约10秒，现在平均在2-3毫秒之间。在一分钟内，它平均大约6到7毫秒，当我让它运行大约5分钟时，它达到了13-14毫秒。这比它开始时慢了数百%，没有什么变化！我在IE11和Firefox35.0.1中测试了相同的代码。两者都显示出相同的退化，但在Firefox中下降的速度似乎要快一些。

现在，我不是为微优化而烦恼的人，但我的目标是达到一个坚实的60 for，这意味着我只有大约16.67ms的渲染和更新，我基本上正在逐渐失去其中的一半，仅仅通过渲染背景！我也担心这可能是一辆失控的火车，谁知道性能会有多差，可能会使我的游戏变得不可玩。

据我所知，这是导致性能下降的唯一因素，原因有两个: 1)游戏代码的其余部分运行平稳，包括呈现构成一个级别的所有瓷砖(每帧375+瓷砖)；2)即使在只包含矩形填充的JSFiddle中也存在此行为。

任何关于这种行为的解释或建议都是很有启发性的！

我知道这听起来很愚蠢，但还有其他人经历过这种行为吗？还是只有我一个人？不过，我应该注意到，我的CPU足够慢(1.4ghz双核)，因此这一点值得注意。

Answer 1

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来获得更好的动画。

改良小提琴

Ps:别忘了半圆柱。