Производительность HTML Canvas - импортировать изображение или нарисовать холст - PullRequest
1 голос
/ 21 июля 2011

Для изображений этой сложности / простоты, лучше ли создавать png и импортировать в холст или рисовать контуры и заливать на холст?

http://www.freeiconsdownload.com/site-images/Large/developer_icons_452x336.jpg

Ответы [ 2 ]

6 голосов
/ 21 июля 2011

В общем случае с Canvas почти всегда лучше рисовать из холста PNG / в памяти, чем создавать и рисовать пути. (см. Сноску) Вот несколько простых данных. Мы говорим здесь в 10 раз.Для простых вещей.

Особенно, если вы собираетесь рисовать эти объекты снова и снова, 60 раз в секунду.

И особенно , когда текст включен .

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

Не сбиться с курса, но я просто хотел бы напомнить, что вы, вероятно, не должны 'не стоит беспокоиться о подобных вещах, пока вы (почти) не закончите с вашим приложением Canvas.

«Мы должны забыть о небольших показателях эффективности, скажем, в 97% случаев: преждевременная оптимизация является корнемвсего зла "-Knuth

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


Некоторые могут задаться вопросом при рендерингедорожки на лету лучше, и, вероятно, для большинства это очевидно, но если это не так, я упомяну об этом.Конечно, бывают случаи, когда рендеринг путей на лету имеет место: интерактивные пути, такие как программы рисования и анимации, рожденные из путей, где следующий кадр - не другое неподвижное изображение, а дополнение к пути.Это и многое другое - везде, где вы хотите обновить сам путь с каждым кадром - это места, где вы хотите сохранить пути и не пытаться ничего предварительно визуализировать.

0 голосов
/ 21 июля 2011

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

При этом, с точки зрения простоты программирования, если у вас уже есть PNG, почему бы не использовать их как есть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...