Adobe Animate HTML5 Canvas проблема с Google Chrome. Анимация отложена

Question

Мы опубликовали холст HTML5 через Adobe Animate. И уменьшили размер файла до менее 2 МБ, и он загружается менее чем за 3 секунды во всех браузерах. Но у нас есть проблемы с кадрами (FPS) в Google Chrome.

Мы дезактивировали двумерный холст-хром-ускоритель в флагах Chrome, но по-прежнему возникают проблемы, при которых анимация работает плавно при больших размерах экрана.

Есть ли способ опубликовать холст в анимации, чтобы этого не произошло? Или есть какой-то код JavaScript, позволяющий Chrome загружать анимацию с правильным FPS?

Мы протестировали в IE, Edge и FF, и все эти браузеры работают плавно. Проблема только в Google Chrome.

Answer 1

Проанализировав это, я обнаружил, что код вызывает большое количество вызовов drawImage. На моей машине он потратил 86% своего времени на призывы drawImage.

Возможно, что он перерисовывает большие изображения в каждом кадре. Посмотрите, есть ли способ остановить это.

Попробуйте удалить фоновые изображения и иметь только линии, если отставание исчезает, у вас есть свой ответ.

Потенциально отношение:

Why does chrome struggle to display lots of images on a canvas when the other browsers don't?