JavaScript Canvas Flicker

Question

Я построил эту игру с использованием HTML Canvas, но мне кажется, что это странное поведение в Mozilla Firefox. Я, кажется, получаю эффект мерцания. Короткий белый момент, за которым следовало все нарисованное. Я предполагаю, что это как-то связано с clearRect, но я хотел бы получить другие мнения о том, что это может быть?

Answer 1

Возможно, вы ищете решение для двойной буферизации - на самом деле не отрисовывайте содержимое холста, пока не закончите его менять.Использование двух элементов canvas, как предложено в Поддерживает ли HTML5 / Canvas двойную буферизацию? действительно должно быть лучшим решением для игр.Если вы создаете свой «буферный холст» динамически и фактически не добавляете его в документ, это должно улучшить производительность при рисовании (браузер не будет пытаться обновить экран при рисовании чего-либо на этом холсте).

Answer 2

Холст FireFox может мерцать при обновлении.Вы можете подавить это, указав атрибут "moz-opaque" в теге <canvas>.Это говорит Firefox, что ваш холст не прозрачен, и он будет «оптимизировать» его рисование холста.Побочным эффектом является устранение мерцающей ошибки.

Answer 3

Попробуйте использовать requestAnimationFrame или просто нарисуйте все на более медленной скорости.