Как создать динамический фон с помощью CSS Paint API

Как создать динамический фон с помощью CSS Paint API

От автора: современные веб-приложения сильно загружены изображениями. Они составляют львиную долю загружаемых байтов. Оптимизируя их, вы можете лучше использовать их производительность. Если вы используете в качестве фоновых изображений геометрические фигуры, то есть альтернатива. Вы можете использовать CSS Paint API для программного создания фонов.

В этом руководстве мы рассмотрим возможности CSS Paint API и то, как мы можем использовать его для создания динамических фонов, не зависящих от разрешения. В результате мы должны получить это:

Как создать динамический фон с помощью CSS Paint API

Настройка проекта

Давайте начнем с создания нового файла index.html и заполним его следующим:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Есть несколько вещей, на которые стоит обратить внимание:

В строке 13 мы загружаем новый рабочий лист для отрисовки. Глобальная поддержка в настоящее время составляет около 63%. Из-за этого мы должны сначала проверить, поддерживается ли paintWorklet.

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

Наконец, вам нужно создать pattern.js, который зарегистрирует рабочий лист — а также styles.css, где мы можем определить пару стилей.

Что такое рабочий лист?

Рабочий лист для отрисовки — это класс, который определяет, что следует отрисовывать на холсте. Они работают аналогично элементу canvas. Если вы уже знаете о нем, код будет выглядеть для вас знакомо. Однако они не идентичны на 100%. Например, методы рендеринга текста еще не поддерживаются в рабочих листах.

Пока давайте также определим стили CSS. Здесь мы ссылаемся на то, что хотим использовать рабочий лист:

Я добавил черную рамку, чтобы мы могли лучше видеть textarea. Чтобы сослаться на рабочий лист, вы должны передать paint(worklet-name) в качестве значения background-image. Но откуда взялось pattern? Мы еще не определили его, поэтому давайте сделаем это на следующем шаге.

Определение рабочего листа

Откройте свой pattern.js и добавьте в него следующий код:

Здесь вы можете зарегистрировать свой рабочий лист с помощью метода registerPaint. Вы можете ссылаться на первый параметр в CSS, который вы определили здесь. Второй параметр — это класс, который определяет, что следует рисовать на холсте. У метода paint есть три параметра:

context: Возвращает объект PaintRenderingContext2D, который реализует подмножество CanvasRenderingContext2DAPI.

canvas: Это наш холст, объект PaintSize, который имеет только два свойства: ширину и высоту.

properties: Возвращает объект StylePropertyMapReadOnly, который мы можем использовать для чтения свойств CSS и их значений через JavaScript.

Отрисовка прямоугольников

Наш следующий шаг — вывести что-то, поэтому мы нарисуем прямоугольники. Добавьте следующее в метод paint:

Все, что мы здесь делаем — это создаем вложенный цикл для перемещения по ширине и высоте холста. Поскольку размер прямоугольника равен 20, мы хотим разделить его высоту и ширину на 20.

В строке 4 мы можем переключаться между двумя цветами, используя оператор модуля. Я также добавил несколько теней для глубины. И, наконец, мы рисуем на холсте прямоугольники. Если вы откроете это в браузере, вы должны увидеть следующее:

Как создать динамический фон с помощью CSS Paint API

Создание динамического фона

К сожалению, помимо изменения размера textarea и получения представления о том, как Paint API перерисовывает все, все остальное в основном по прежнему статично. Итак, давайте сделаем вещи более динамичными, добавив пользовательские свойства CSS, которые мы можем изменить. Откройте файл styles.css и добавьте в него следующие строки:

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Проверка поддержки в CSS

Чтобы убедиться, что Paint API поддерживается, мы также можем проверить поддержку в CSS. Для этого у нас есть два варианта:

Защита правил с помощью правила @supports.

Использование резервного фонового изображения.

Доступ к параметрам в рабочем листе для отрисовки

Чтобы прочитать эти параметры внутри pattern.js, вам нужно добавить новый метод в класс, который определяет рабочий лист для отрисовки:

Чтобы получить доступ к этим свойствам внутри метода paint, вы можете использовать properties.get:

Для цвета нам нужно преобразовать его в строку. Все остальное нужно будет преобразовать в число. Это потому, что properties.get возвращает CSSUnparsedValue.

Как создать динамический фон с помощью CSS Paint API

Возвращаемое значение properties.get.

Чтобы сделать вещи немного более читаемыми, я создал две новые функции, которые обрабатывают парсинг:

Все, что нам нужно сделать сейчас, это заменить все в цикле for соответствующими значениями prop:

Теперь вернитесь в браузер, чтобы увидеть изменения.

Как создать динамический фон с помощью CSS Paint API

Редактирование фона внутри DevTools.

Заключение

Почему CSS Paint API может быть полезен для нас? Каковы варианты использования?

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

Для сложных CSS-эффектов, которые используют элементы DOM, вы также уменьшаете количество узлов на странице. Поскольку вы можете создавать с помощью Paint API сложные анимации, нет необходимости в дополнительных пустых узлах.

На мой взгляд, самым большим преимуществом является то, что он гораздо более настраиваемый, чем статические фоновые изображения. API также создает изображения, независимые от разрешения, поэтому вам не нужно беспокоиться о том, что вам не хватает размера экрана.

Если вы решили использовать CSS Paint API сегодня, убедитесь, что вы предоставляете полифилл, поскольку он все еще не получил широкой поддержки. Если вы хотите настроить готовый проект, вы можете клонировать его из этого репозитория GitHub.

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

Автор: Ferenc Almasi

Источник: https://medium.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий