Эта статья в основном представляет учебник по использованию многоуровневого холста для оптимизации рендеринга HTML5. Это происходит от технических документов официального разработчика веб -сайта IBM. Друзья, которые это нужно, могут относиться к следующему введению
Как правило, при игре 2D игр или рендеринга HTML5 Canvas необходимо выполнить оптимизация для использования нескольких слоев для создания синтетической сцены. При низкоуровневых рендерингах, таких как OpenGL или WebGL, рендеринг выполняется путем очистки и рисования рамки сцены за кадром. После реализации рендеринга игра должна быть оптимизирована, чтобы уменьшить количество рендеринга, и требуемая стоимость варьируется от ситуации к ситуации. Поскольку Canvas является элементом DOM, он позволяет вам сложить несколько полосов в качестве метода оптимизации.
Общие сокращения
DOM: документ объектной модели
HTML: язык наценки гипертекста (язык наценки гипертекста)
В этой статье будет рассмотрена рациональность расслоения холстов. Понять настройки DOM, чтобы включить слоистый холст. Использование иерархической оптимизации требует различных практик. В этой статье также будут изучены некоторые концепции и методы для стратегий оптимизации, которые расширяют иерархический подход.
Вы можете скачать исходный код для примеров, используемых в этой статье.
Выберите стратегию оптимизации
Выбор наилучшей стратегии оптимизации может быть трудным. При выборе иерархического сценария вам нужно рассмотреть, как составлен сценарий. Рендеринг фиксированных объектов на больших экранах часто требует повторного использования нескольких компонентов, которые являются отличными кандидатами на исследования. Эффекты, такие как параллакс или анимационные объекты, часто требуют большого различного пространства экрана. Лучше всего обратить внимание на эти ситуации при изучении ваших лучших стратегий оптимизации. Хотя иерархическая оптимизация холста требует нескольких различных методов, производительность часто будет значительно улучшена после правильного применения этих методов.
Настройки слой
При использовании иерархического метода первым шагом является установка холста на DOM. Обычно это просто, просто определите элемент холста и поместите его в DOM, но слой холста может потребовать дополнительный стиль. При использовании CSS существует два требования для успешной реализации иерархии холста:
Каждый элемент холста должен сосуществовать в одном и том же положении в точке зрения.
Каждый холст должен быть видим под другим холстом.
На рисунке 1 показана общая концепция перекрытия, стоящая за настройками слоя.
Рисунок 1. Пример слоя
Шаги по настройке слоя следующие:
Добавьте стили позиционирования элемента Canvas, чтобы поддержать иерархию.
Стиль элементы холста для создания прозрачного фона.
Установите стек перекрытия Canvas
Создание наложного стека в CSS может потребовать небольшого количества стилей. Есть много способов перекрытия с использованием HTML и CSS. Примеры в этой статье используют тег <viv> для содержания холста. Тег <vis> указывает уникальный идентификатор, который применяет стиль к его детским элементам холста HTML5, как показано в списке 1.
Листинг 1. Стили позиционирования холста
CSS -код копировать контент в буфер обмена