JavaScript Canvas Flicker

Question

我使用HTML Canvas构建了这个游戏，但我似乎在Mozilla Firefox中得到了这种奇怪的行为。我似乎得到一个闪烁效果。短暂的白色随后被绘制的一切。我认为这与clearRect有关，但我想就其可能的内容提出其他意见？

Answer 1

您可能正在寻找双缓冲解决方案 - 在您完成更改后，不要实际绘制画布内容。使用Does HTML5/Canvas Support Double Buffering?中建议的两个canvas元素应该是游戏的最佳解决方案。如果您动态创建“缓冲区画布”并且实际上没有将其添加到文档中，则应该提高绘图性能（当您向此画布绘制内容时，浏览器不会尝试更新屏幕）。

Answer 2

尝试使用requestAnimationFrame，或者只是以较慢的速度绘制所有内容。

Answer 3

FireFox画布可能会闪烁更新。你可以通过指定＆＃34; moz-opaque＆＃34;来抑制它。 <canvas>标记中的属性。这告诉Firefox你的画布不透明，它将＆＃34;优化＆＃34;它的画布画。副作用是消除闪烁的错误。