PaintWorkletGlobalScope

Интерфейс PaintWorkletGlobalScope API рисования CSS представляет собой глобальный объект, доступный внутри Worklet работы.

Чтобы избежать утечки посещённых ссылок, эта функция в настоящее время отключена в браузерах на основе Chrome для элементов <a> с атрибутом href и для дочерних элементов таких элементов. Подробности см. ниже:

• Раздел «Рассмотрение конфиденциальности» API рисования CSS Раздел «Рассмотрение конфиденциальности»
• Проблема спецификации API рисования CSS «API рисования CSS раскрывает историю посещений»

Этот интерфейс наследует свойства от WorkletGlobalScope.

PaintWorkletGlobalScope.devicePixelRatio Только для чтения Экспериментально

Возвращает текущее соотношение физических пикселей к логическим пикселям устройства.

Этот интерфейс наследует методы от WorkletGlobalScope.

PaintWorkletGlobalScope.registerPaint() Экспериментально

Регистрирует класс для программного создания изображения, где CSS-свойство ожидает файл.

Эти три примера вместе демонстрируют создание, загрузку и использование Worklet рисования.

Следующий пример показывает модуль работы. Он должен находиться в отдельном файле js. Обратите внимание, что registerPaint() вызывается без ссылки на Worklet рисования.

class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // The global object here is a PaintWorkletGlobalScope
    // Methods and properties can be accessed directly
    // as global features or prefixed using self
    const dpr = self.devicePixelRatio;

    // 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);

Следующий пример демонстрирует загрузку вышеуказанной работы рисования из её файла js, используя обнаружение функций.

if ("paintWorklet" in CSS) {
  CSS.paintWorklet.addModule("checkerboard.js");
}

Этот пример показывает, как использовать Worklet рисования в таблице стилей, включая самый простой способ предоставить резервный вариант, если CSS.paintWorklet не поддерживается.

<style>
  textarea {
    background-image: url(checkerboard);
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>

Вы также можете использовать правило @supports.

@supports (background: paint(id)) {
  background-image: paint(checkerboard);
}

• API рисования CSS
• API Houdini