Перерисовать много объектов в Canvas HTML

Question

Существует ли быстрый и эффективный способ перемещения множества объектов в canvas?В основном, если имеется около 1000 объектов, и я хочу переместить все их одновременно, чтобы эмулировать прокрутку, очень медленно перерисовывать каждый отдельный объект, вызывая drawImage() 1000+ раз.

Есть ли способ оптимизироватьэтот?У меня есть пример ссылки на проблему (и это только с 100 объектами): http://craftyjs.com/isometric/

Answer 1

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

Так что ты можешь сделать?Короче говоря, ничто. Особенно при прокрутке, конечно, вы можете делать трюки с несколькими холстами, когда у вас более или менее статичный фон, но для движущихся объектов едва ли есть какие-либо приемы, улучшающие производительность.* Итак, вы идете ждать доставки аппаратного ускорения во всех основных браузерах, я знаю, это звучит смешно, но я слишком жду этого: /

Проблема в том, что canvas никогда не был разработандля игры вещи.Он был спроектирован как, ну, в принципе, что-то вроде рисования на лету, думаю, что дизайнеры имели в виду клоны Photoshop, но определенно не игры, не говоря уже о том, что нет быстрой операции очистки, доказывающей это,нет даже оптимизации при очистке всего холста с тем же цветом.

Answer 2

Если изображения уже скомпонованы, не перемещаются относительно друг друга и определены прямоугольной областью, то использование canvas.drawImage() с холстом в качестве первого параметра и рисование в подобласти должныБыть значительно быстрее, чем перерисовывать все объекты.

Вы также можете просто наложить несколько холстов и сдвинуть верхний холст с объектами в HTML для их прокрутки.

Редактировать : Действительно посмотрев на ваш пример, мне кажется, что он должен быть реализован аналогично Google Maps: создавать плитки холстов и перемещать их влево / вправо на HTML-странице;как только холст полностью соскользнул с экрана (например, с левого края), переместите его на другую сторону (к правому краю) и повторно используйте его для рисования.При этом вам нужно будет перерисовывать только те объекты, которые перекрывают холсты, которые движутся по краям.

Answer 3

Вы можете нарисовать все объекты на втором, внеэкранном холсте, а затем скопировать только весь холст (drawImage() принимает элемент холста).

Однако, если вы ориентируетесь на настольные браузеры, тогда в этом нет необходимости. У меня реализован механизм листов ( source ), который просто перерисовывает всю сцену, и наивная реализация оказалась довольно быстрой.

Answer 4

Вы можете использовать мозаичный рендеринг. http://www.gamesfrommars.fr/demojsv2/ (лучше смотреть с Chrome)

Answer 5

Что я сделал, чтобы решить эту проблему, так это то, что у меня было 10 квадратов на экране, и я хотел анимировать их на белом фоне. Поэтому я нарисовал белый прямоугольник поверх холста, чтобы очистить холст, чтобы анимация работала. Имеет ли это смысл?

@ Ivo Кстати, я прочитал на http://www.w3.org/TR/html5/the-canvas-element.html, что canvas был создан для таких приложений, как игры, потому что это было решение для избавления от зависимости от внешнего движка. Canvas встроен, поэтому он похож на флеш-плеер, встроенный в ваш браузер на базе JavaScript. Я думаю, что это увлекательно.