PaintWorkletGlobalScope

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

PaintWorkletGlobalScope は CSS 描画 API のインターフェイスで、描画ワークレット内で利用できるグローバルオブジェクトを表します。

プライバシーの考慮点

訪問したリンクが漏洩するのを避けるため、現在 Chrome ベースのブラウザーでは、href 属性を持つ <a> 要素、およびそのような要素の子要素に対してこの機能は無効になっています。詳細は以下を参照してください。

インスタンスプロパティ

このインターフェイスには WorkletGlobalScope から継承したプロパティがあります。

PaintWorkletGlobalScope.devicePixelRatio 読取専用

現在の端末の物理ピクセルと論理ピクセルの比率を返します。

インスタンスメソッド

このインターフェイスには WorkletGlobalScope から継承したメソッドがあります。

PaintWorkletGlobalScope.registerPaint()

CSS プロパティがファイルを指定する場合に、プログラムで画像を生成するクラスを登録します。

例

次の 3 つの例は、描画ワークレットを作成し、読み込ませ、使用することを示しています。

描画ワークレットの作成

以下にワークレットモジュールの例を示します。これは別個の js ファイルにする必要があります。registerPaint() は描画ワークレットを参照せずに呼び出されることに注意してください。

js
class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // ここでのグローバルオブジェクトは PaintWorkletGlobalScope です。
    // メソッドとプロパティは、グローバル機能として直接アクセスするか、
    // self を使用して接頭辞を付けてアクセスすることができます。
    const dpr = self.devicePixelRatio;

    // 通常のキャンバスのように `ctx` を使用します。
    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();
      }
    }
  }
}

// 固有の名前でクラスを登録します。
registerPaint("checkerboard", CheckerboardPainter);

描画ワークレットの読み込み

次の例は、機能検出によって上記のワークレットを js ファイルから読み込み、実行することを示しています。

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

描画ワークレットの使用

この例では、スタイルシートで描画 Worklet を使用する方法を示します。CSS.paintWorklet が対応していない場合に代替方法を提供する最も簡単な方法も記載しています。

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

@supports アットルールを使用することもできます。

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

仕様書

Specification
CSS Painting API Level 1
# paintworkletglobalscope

ブラウザーの互換性

BCD tables only load in the browser

関連情報