PaintWorkletGlobalScope: метод registerPaint()

Метод registerPaint() интерфейса PaintWorkletGlobalScope регистрирует класс для программного создания изображения, где свойство CSS ожидает файл.

name

Имя класса worklet для регистрации.

classRef

Ссылка на класс, реализующий worklet.

None (undefined).

TypeError

Выбрасывается, когда один из аргументов недействителен или отсутствует.

InvalidModificationError DOMException

Выбрасывается, когда worklet с указанным именем уже существует.

В следующем примере показана регистрация модуля worklet. Он должен быть в отдельном файле js. Обратите внимание, что registerPaint() вызывается без ссылки на PaintWorkletGlobalScope. Сам файл загружается с помощью CSS.paintWorklet.addModule() (документировано здесь в родительском классе PaintWorklet, в Worklet.addModule().

/* checkboardWorklet.js */

class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // Use `ctx` as if it was a normal canvas
    const colors = ["red", "green", "blue"];
    const size = 32;
    for (let y = 0; y < geom.height / size; y++) {
      for (let x = 0; x < geom.width / size; x++) {
        const color = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.rect(x * size, y * size, size, size);
        ctx.fill();
      }
    }
  }
}

// Register our class under a specific name
registerPaint("checkerboard", CheckerboardPainter);

Первый шаг в использовании paintworklet — определение paint worklet с помощью функции registerPaint(), как показано выше. Для использования его необходимо зарегистрировать с помощью метода CSS.paintWorklet.addModule():

<script>
  CSS.paintWorklet.addModule("checkboardWorklet.js");
</script>

Затем вы можете использовать функцию paint() CSS в вашем CSS там, где допустимо значение <image>.

li {
  background-image: paint(checkerboard);
}

• CSS Painting API
• API Houdini