HTML5 <canvas>: влияние drawImage () на производительность

Question

Мне было интересно, были ли какие-либо различия в производительности при использовании drawImage () на динамически создаваемом холсте (то есть document.createElement ("canvas")) по сравнению с холстом, уже созданным в DOM (то есть тегами на странице HTML).

Я думаю, что «медленная» часть drawImage () возникает, когда ему действительно нужно отображать визуальные эффекты для пользователя, хотя я могу ошибаться (не могу найти слишком много информации по этому поводу).

Было бы существенно дороже нарисовать группу объектов на холсте в памяти с последующим окончательным рисованием на "основном" холсте, чем просто рисовать прямо на последнем?Я чувствую, что было бы лучше иметь несколько полотен, по крайней мере, для организационных целей.

Связанный: влияет ли размер холста на производительность, если вы рисуете только его подраздел?

Answer 1

Говоря о Chrome и Firefox, я не смог найти никакой разницы между статическими и динамическими элементами canvas. Главным образом количество пикселей, которое обрабатывает drawImage (), делает его медленным + текущая globalCompositeOperation (copy, source-over - самые быстрые). Однако браузер должен отображать всю страницу полностью, поэтому не рекомендуется размещать растянутое (фоновое) изображение под холстом.

Существует разница между атрибутами ширины / высоты холста и атрибутами ширины / высоты стиля. У вас может быть холст размером 300 * 200 пикселей с размером стиля, установленным на 100%. Тогда внутренняя скорость рисования будет такой же, как и у всех окон браузера. Конечно, качество отображения является проблемой.

Вы можете отделить чертеж (линии, прямоугольники, дуги и т. Д.) От блитинга (drawImage) и выяснить, что занимает больше времени в вашем приложении. Пока нет необходимости в нескольких холстах (обработка изображений, смешивание видео и т. Д.), Старайтесь избегать drawImage (). Ваш код, а не элементы, должен помочь вам разобраться с «организационными целями».

Полноэкранный режим drawImage () на нетбуке 1 ГГц с разрешением 1024x600 пикселей занимает около 10 мсек. Делая это дважды, вы не сможете достичь частоты 50 Гц. Ситуация ухудшается, если вы нацелены на смартфоны iPhone или Android.

Нет необходимости делать старую-двойную буферизацию с canvas, это уже реализовано. Вы можете обновлять только релевантные (грязные) части вашего элемента canvas в любое время и получать необходимые msecs.

Вместо использования нескольких холстов есть возможность делать все невидимые операции над огромной в разных секциях - drawImage () с одинаковой целью и источником. Тогда легче увидеть, что происходит во время отладки.