Если мы используем несколько <canvas>
на одной странице html, это мешает производительности разрабатываемого приложения и делает код очень громоздким и требует больше времени для загрузки страницы?
HTML5 несколько холстов на одной странице
Ответ 1
Иногда несколько холстов приводят к лучшей производительности. Лучше всего проверить, можете ли вы позволить себе время.
Предположим, что вы создаете программу, на которой есть элементы на экране, и позволяет пользователю нарисовать окно выбора.
С помощью одного холста, чтобы нарисовать окно выбора, вам придется перерисовывать все элементы снова и снова, чтобы обновить окно выбора, которое видит пользователь, поскольку все они находятся на одном и том же холсте.
Или у вас могут быть две холсты, одна с объектами, а затем другая перед такими вещами, как "инструменты" (например, графическая рамка выбора). Здесь два холста могут быть более эффективными.
В других случаях вам может понадобиться фон, который изменяет очень редко и объекты переднего плана, которые меняются все время. Вместо того, чтобы перерисовывать все из них со скоростью 60 кадров в секунду, вы создаете холст фона и холст переднего плана, и только объекты переднего плана перерисовываются с быстрой скоростью. Здесь два полотна должны быть более эффективными, чем один, но может быть более оптимальным "кэшировать" этот фоновый холст в качестве изображения и рисовать изображение сначала в каждом кадре.
Ответ 2
Я использовал десятки холстов на одной странице, отображая разные графики, используя графическую библиотеку javascript. Графики довольно быстрые, и они собирают данные для них, что в нашем случае немного медленнее.
Если вы хотите, вы можете подождать, пока сделаете весь рисунок, пока остальная часть страницы не загрузится из функции onLoad
.
Ответ 3
По словам Марка Пилигрима, было бы неплохо использовать несколько полотен.
Смотрите эту ссылку
Использование нескольких полотен может упростить вашу работу, изолируя области экрана для обновления и изолируя входные события. Если ваша страница хорошо подходит для разделения областей экрана, я скажу, пойти на это.
Ответ 4
Кроме того, HTML5Rocks говорит, это лучший подход.
Ответ 5
Один экземпляр работает гладко, больше не влияет на рендеринг на странице. Данные являются фактором замедления холста. Чтобы увеличить время загрузки страницы, вы можете просто вызвать методы визуализации Canvas после загрузки страницы.