RequestAnimationFrame для нескольких полотен

Question

У меня есть страница со слоистыми <canvas> элементами, как объяснено в ответе здесь . Полотна вместе составляют анимацию, поэтому каждый очищается и перерисовывается по мере необходимости.

Теперь я пытаюсь включить requestAnimationFrame, используя кросс-браузерную шим . Но я на самом деле не знаю, что requestAnimationFrame делает за кулисами.

Можно ли обновлять несколько холстов в каждом цикле? Должен ли каждый холст иметь свой цикл? Зависит ли браузер ответов?

Answer 1

Обновление всех полотен в одном requestAnimationFrame совершенно нормально.

Если полотна независимы друг от друга и появляются в разных разделах страницы, вы можете использовать отдельные обработчики requestAnimationFrame, передав элемент canvas в качестве второго аргумента.Таким образом, обновляются только видимые на данный момент холсты.(Однако передача элемента в качестве второго аргумента зависит от WebKit.)

Что делает requestAnimationFrame, так это сообщает браузеру, что вы хотите обновить внешний вид страницы.Браузер вызывает обратный вызов, когда страница или элемент находятся рядом для перерисовки.И это произойдет, когда страница / элемент видна, и никогда не чаще, чем частота обновления экрана.

Answer 2

Использование requestAnimationFrame просто позволяет браузеру контролировать, когда происходит перерисовка / перерисовка на странице.

Было бы лучше изменить все полотна в одном обратном вызове, чтобы браузер мог перекрасить их за один раз.

Это объяснение requestAnimationFrame было довольно полезным

Answer 3

Подкладка просто возвращается к таймеру, если она недоступна.

С тобой все должно быть в порядке. Обновите их все в одном цикле.

requestAnimFrame не «привязан» к холсту или чему-либо, просто функция, которую вы передаете. Таким образом, вы можете использовать его с тремя холстами или просто без нуля.