HTML5 Canvas: лучше перерисовывать объекты или использовать растровые изображения?

Question

В моем проекте есть холст HTML5, на котором графические объекты рисуются неоднократно. Эти объекты быстро меняются. Рисование их требует времени. Как я могу сделать это быстрее?

Объекты не слишком сложны, но содержат такие вещи, как дуги, градиенты, многоугольники.

Внешний вид объекта зависит от примерно 10 свойств, каждое из которых имеет одно из примерно 10 значений. Это означает, что существует только около 100 различных видов внешнего вида, которые может иметь объект. Вот почему я думаю только о том, чтобы рисовать каждый вид один раз, а затем кэшировать растровое изображение для повторного использования.

Все должно работать на клиенте (т.е. я не могу использовать готовые изображения)

1. Как лучше всего это сделать с помощью HTML5 Canvas?
2. Это вообще хорошая идея или накладные расходы на работу с растровыми изображениями больше, чем каждый раз перерисовывание объектов?

Answer 1

кеш кеш кеш!Прочтите эту статью Саймона Сарриса и мои собственные выводы .По сути, вы делаете холст в памяти, копируете содержимое и можете использовать его повторно.При этом вы увидите значительное увеличение производительности.

Вращение спрайтов без кэширования

Вращение спрайтов с кэшированием (поднимитесь вверх, чтобы найти зомби)

Во втором примере вы увидите довольно большое улучшение.

РЕДАКТИРОВАТЬ

jsfiddle пример кэширован

Пример jsfiddle не кешируется

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

JSperf находки Саймона Сарриса

Answer 2

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

В целомНа основании этого я бы предложил рассмотреть следующий путь принятия решения.

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

Это можно считать похожим на минимум 99 ^ 2 теоретически возможных переходов статуса для каждого из ваших объектов.

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

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

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