HTML5 несколько холстов на одной странице - PullRequest
38 голосов
/ 26 октября 2010

Если мы используем несколько <canvas> на одной html-странице, это ухудшает производительность разрабатываемого приложения и делает ли код очень громоздким и требует больше времени для загрузки страницы?

Ответы [ 5 ]

44 голосов
/ 26 октября 2010

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

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

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

Или, у вас может быть два холста, один с объектами, а затем другой перед такими вещами, как «инструменты» (например, графика в блоке выбора). Здесь два полотна могут быть более эффективными.

В других случаях вам может понадобиться фон, который меняется очень редко, и объекты переднего плана, которые постоянно меняются. Вместо того, чтобы перерисовывать их все со скоростью 60 кадров в секунду, вы создаете фоновый холст и холст переднего плана, и объекты переднего плана перерисовываются только на высокой скорости. Здесь два полотна должны быть более эффективными, чем одно, но может быть более оптимальным «кэшировать» этот фоновый холст как изображение и рисовать изображение первым в каждом кадре.

5 голосов
/ 26 октября 2010

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

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

3 голосов
/ 26 декабря 2010

По словам Марка Пилигрима, неплохо использовать несколько полотен.

См. Эта ссылка

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

2 голосов
/ 13 октября 2011

Кроме того, HTML5Rocks говорит, что это лучший подход.

1 голос
/ 26 октября 2010

Один экземпляр работает гладко, больше не влияет на рендеринг на странице.Данные являются фактором замедления холста.Чтобы увеличить время загрузки страницы, вы можете просто вызвать методы визуализации Canvas после загрузки страницы.

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