Изучение Javascript, CSS и ворклетов Paint: зачем использовать Javascript в CSS?
12 марта 2022 г.== В наши дни включение CSS в Javascript является нормой, но что, если бы мы могли поступить наоборот?==
Недавно я много читал о [Houdini] (https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini), который дает разработчикам возможность напрямую взаимодействовать с объектом CSS. Модель.
Одна из самых крутых вещей в нем — это то, что он позволяет нам добавлять Javascript в наш CSS.
В приведенном ниже примере я создал фоновый эффект, в котором Javascript находится внутри CSS. При каждом обновлении фон рандомизируется. Проверьте вкладку CSS ниже, чтобы увидеть Javascript внутри CSS.
Вы даже можете использовать переменные CSS непосредственно в коде Javascript, что позволит вам использовать стандартные цвета и другие параметры, настроенные вами в таблице стилей.
Поддержка Paint Worklets
На данный момент эти функции работают только в Google Chrome и Edge, а также в некоторых других браузерах, поэтому убедитесь, что вы используете один из них, когда пробуете демонстрацию ниже.
Демо
https://codepen.io/smpnjn/pen/QWOZZjG
Всякий раз, когда вы меняете класс элемента, Javascript внутри CSS перерисовывается, а это означает, что простое добавление классов к элементу может воссоздать сложные эффекты с использованием разных цветов, как показано выше!
Когда вы нажимаете на один из вариантов, таких как Red/Blue, единственное, что меняется, это имя класса div.
Что такое Paint Worklets?
Ворклеты Paint — это способ создания изображений для вашего CSS с использованием методов, знакомых вам, если вы раньше использовали холст HTML. Мы можем зарегистрировать пользовательские CSS Paint Worklet, поместив наш worklet в файл и используя следующую строку:
```javascript
CSS.paintWorklet.addModule('paint-worklet.js');
Затем мы можем использовать эти ворклеты рисования непосредственно в нашем CSS, используя функцию paint(). Прежде чем мы перейдем к этому, давайте посмотрим, как мы можем создать наш файл paint-worklet.js.
Как создать файл ворклета Paint в Javascript
Давайте создадим базовый набор для рисования. Наш файл рабочего набора для рисования будет называться paint-worklet.js. Он будет содержать класс, который мы регистрируем с помощью функции registerPaint. В конечном счете, класс будет работать как любой другой класс Javascript, но для создания изображения будет выполняться функция paint() внутри класса.
Функция paint() имеет три аргумента:
- ctx — действует как контекст холста со всеми обычными функциями холста.
- geom — содержит информацию о закрашиваемом элементе CSS, такую как ширина и высота.
- properties - содержит дополнительную информацию о свойствах CSS, которые мы можем зарегистрировать отдельно.
Ниже мы создадим наш класс под названием «BackgroundCanvas». Код, который я написал ниже, затем рисует на холсте случайные круги, которые имеют случайный размер и различаются по степени размытия.
В этой функции есть различные настраиваемые параметры, такие как количество, размытие и радиус, которые позволяют нам настроить способ визуализации эффекта.
```javascript
класс BackgroundCanvas {
ранд(мин, макс) {
return Math.random() * (макс. - мин.) + мин.;
краска (ctx, геометрия, свойства) {
// Цвета для фонового градиента
пусть backgroundColors = ['#000', '#000'];
// Цвета для цветов круга
let colors = ['#202bc5', '#cc3d44'];
// Количество кругов для рендеринга
пусть количество = 200;
// Диапазон значений размытия и радиуса
пусть размытие = [ 10, 100 ]; // Мин., Макс. размытие
пусть радиус = [ 1, 40 ]; // Мин., макс. радиус
// Очищаем весь холст
ctx.clearRect(0, 0, геометрическая ширина, геометрическая высота);
// И используйте режим наложения, чтобы эффект выглядел круче
ctx.globalCompositeOperation = 'светлее';
// Применяем фоновый градиент
пусть grd = ctx.createLinearGradient (0, geom.height, geom.width, 0);
grd.addColorStop(0, backgroundColors[0]);
grd.addColorStop(1, backgroundColors[1]);
ctx.fillStyle = грд;
// Заливаем прямоугольник градиентом
ctx.fillRect(0, 0, геометрия.ширина, геометрия.высота);
// Затем рисуем кружок для каждого значения count
в то время как (счет--) {
// Определяем случайные x, y, размытие и радиус
пусть thisRadius = this.rand (радиус [0], радиус [1]);
пусть thisBlur = this.rand(blur[0], blur[1]);
пусть x = this.rand(-100, geom.width + 100);
пусть y = this.rand(-100, geom.height + 100);
// Нарисуйте круг, используя цвет, размытие и радиус, которые мы определили
ctx.beginPath();
ctx.filter = размытие(${thisBlur}px);
пусть grd = ctx.createLinearGradient(x - thisRadius / 2, y - thisRadius / 2, x + thisRadius, y + thisRadius);
grd.addColorStop (0, цвета [0]);
grd.addColorStop(1, цвета[1]);
ctx.fillStyle = грд;
ctx.arc( x, y, thisRadius, 0, Math.PI * 2 );
ctx.closePath();
ctx.заполнить();
// Зарегистрируйте класс «BackgroundClass» как вызываемый «BackgroundCanvas».
registerPaint('BackgroundCanvas', BackgroundCanvas);
Чтобы зарегистрировать этот модуль рисования, добавьте следующий код Javascript в свой HTML-документ:
```разметка
<скрипт>
CSS.paintWorklet.addModule('paint-worklet.js');
Как использовать Paint Worklets в CSS
Мы можем добавить наш рабочий процесс рисования в наш CSS с нашими недавно созданными модулями рисования. Поскольку мы зарегистрировали наш модуль рисования, мы можем вызвать его в нашем CSS для создания эффекта фона. Поскольку мы назвали наш модуль рисования BackgroundCanvas, добавление его в наш CSS выглядит следующим образом:
``CSS
краска {
фон: краска (BackgroundCanvasInline);
Теперь наш код холста, который мы написали выше, будет выполняться в div #paint, придавая ему фон, продемонстрированный в CodePen вверху этой статьи.
Как добавить Javascript в свой CSS
Поскольку мы можем получить доступ к свойствам в CSS из Javascript, мы можем поместить весь наш Javascript прямо в свойство CSS. Одним из преимуществ этого является то, что мы получаем Javascript, напрямую настраиваемый из переменных CSS.
Как я уже упоминал, наш Javascript будет перерисовываться всякий раз, когда мы меняем классы элемента. Таким образом, у нас могут быть разные классы с разными настройками переменных CSS, что позволяет нам изменять Javascript, просто изменяя наш CSS.
``CSS
краска.красный {
--circleColorOne: "красный";
--circleColorTwo: "синий";
--число: 200;
краска.зеленый {
--circleColorOne: "#0054ff";
--circleColorTwo: "#7fe427";
--количество: 250;
paint.default {
--circleColorOne: "#202bc5";
--circleColorTwo: "#cc3d44";
краска {
--число: 300;
--минРазмытие: 10;
--maxBlur: 100;
--минРадиус: 1;
--maxRadius: 40;
--фоновый эффект: {
пусть backgroundColors = ['#000', '#000'];
let colors = [var(--circleColorOne), var(--circleColorTwo)];
пусть count = var(--number);
let blur = [var(--minBlur), var(--maxBlur)];
пусть radius = [var(--minRadius), var(--maxRadius)];
ctx.clearRect(0, 0, геометрическая ширина, геометрическая высота);
ctx.globalCompositeOperation = 'светлее';
пусть grd = ctx.createLinearGradient (0, geom.height, geom.width, 0);
grd.addColorStop(0, backgroundColors[0]);
grd.addColorStop(1, backgroundColors[1]);
ctx.fillStyle = грд;
ctx.fillRect(0, 0, геометрия.ширина, геометрия.высота);
в то время как (счет--) {
пусть thisRadius = rand (радиус [0], радиус [1]);
пусть thisBlur = rand(blur[0], blur[1]),
х = ранд (-100, геометрическая ширина + 100),
y = rand(-100, geom.height + 100);
ctx.beginPath();
ctx.filter = размытие(${thisBlur}px);
пусть grd = ctx.createLinearGradient(x - thisRadius / 2, y - thisRadius / 2, x + thisRadius, y + thisRadius);
grd.addColorStop (0, цвета [0]);
grd.addColorStop(1, цвета[1]);
ctx.fillStyle = грд;
ctx.arc( x, y, thisRadius, 0, Math.PI * 2 );
ctx.closePath();
ctx.заполнить();
фон: краска (BackgroundCanvasInline);
набивка: 2рем;
семейство шрифтов: -apple-system, Inter, BlinkMacSystemFont, «Segoe UI», Roboto, Oxygen, Ubuntu, Cantarell, «Open Sans», «Helvetica Neue», без засечек;
радиус границы: 4px;
белый цвет;
радиус границы: 14px;
вес шрифта: 900;
размер шрифта: 2rem;
максимальная ширина: 600 пикселей;
высота: 400 пикселей;
Это означает, что вы можете изменить размытие, радиус, цвет и количество кругов, просто обновив переменные CSS. Нам просто нужно обновить наш файл paint-worklet.js, чтобы выполнить наш CSS. Наш новый paint-worklet.js выглядит так:
```javascript
класс BackgroundCanvasInline {
статические получить inputProperties () {
return ['--backgroundEffect'];
ранд(мин, макс) {
return Math.random() * (макс. - мин.) + мин.;
краска (ctx, геометрия, свойства) {
let parseCss = new Function('ctx', 'geom', 'rand', properties.get('--backgroundEffect').toString());
parseCss(ctx, geom, this.rand);
registerPaint('BackgroundCanvasInline', BackgroundCanvasInline);
Обратите внимание, что мы можем получить нашу переменную --backgroundEffect с помощью статического метода get. Затем мы выполняем нашу функцию, используя новую нотацию Function, передавая соответствующие аргументы.
Зачем использовать Javascript в CSS?
Добавление Javascript в ваш CSS довольно круто - это достаточно веская причина, но главное преимущество заключается в том, что вы можете хранить все свои переменные для цвета, размера и визуального вида элементов холста, непосредственно хранящихся в вашем CSS с помощью переменных CSS.
Использование new Function(), очевидно, имеет последствия для безопасности, однако ворклеты рисования довольно ограничены по функциональности и не имеют объекта globalThis/window или даже функциональности выборки.
Таким образом, риск минимален. Однако я бы все же посоветовал, что лучше потренироваться хранить свой Javascript непосредственно в самом ворклете, а не в CSS.
В любом случае, это приложение ворклетов рисования непосредственно в CSS — это захватывающий способ рендеринга функциональности, подобной холсту, в CSS, и довольно здорово иметь возможность динамически использовать ваши переменные CSS в Javascript.
Полный код этой статьи можно найти на CodePen по этой ссылке. Если вам понравилась эта статья, подпишитесь на меня в Твиттере, чтобы узнать больше о разработчиках.
Ранее опубликовано здесь: https://fjolt.com/article/javascript-putting-js-in-css
Оригинал