HTML Canvas, лаги и неуклюжий

Question

У меня есть 4 холста один поверх другого, каждый из которых имеет размер 64x128 пикселей.Я их складываю, потому что хочу имитировать маленький горизонтальный ЖК-экран и его функциональность.Моя проблема в том, что он становится медленным и неуклюжим, у меня одновременно работают 2 анимации с временем перезагрузки 100 мс.Есть ли что-то, что я могу сделать, чтобы это исправить, или я просто пытаюсь сделать многое в браузере?

В основном у меня есть интервал, и каждые 100 мс я очищаю холст и снова рисую.

Answer 1

Вам нужно обновлять его каждые 100 мс?Вы хотите перерисовывать холст только тогда, когда это необходимо для максимальной эффективности.

Например, вам может понадобиться только один холст, который стирается и перерисовывается каждые 100 мс, и только те вещи, которые вы хотите перерисоватькаждые 100 мс должны быть нарисованы на этом холсте.Если есть что-то, что меняется только из-за взаимодействия с пользователем, поместите это на другой холст и перерисовывайте только тот холст, когда пользователь взаимодействует с ним (например, щелчки).

Анимация также может показаться медленной, потому что вытолько перерисовывать его каждые 100 мс.Это всего 10 раз в секунду (10 кадров в секунду) - возможно, вам стоит использовать requestAnimationFrame () .Трудно понять, когда вы не поделились своим кодом.