PaintWorkletGlobalScope
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
PaintWorkletGlobalScope
は CSS 描画 API のインターフェイスで、描画ワークレット
内で利用できるグローバルオブジェクトを表します。
プライバシーの考慮点
訪問したリンクが漏洩するのを避けるため、現在 Chrome ベースのブラウザーでは、href
属性を持つ <a>
要素、およびそのような要素の子要素に対してこの機能は無効になっています。詳細は以下を参照してください。
- The CSS Painting API Privacy Considerations section
- The CSS Painting API spec issue "CSS Paint API leaks browsing history"
インスタンスプロパティ
このインターフェイスには WorkletGlobalScope
から継承したプロパティがあります。
PaintWorkletGlobalScope.devicePixelRatio
読取専用 Experimental-
現在の端末の物理ピクセルと論理ピクセルの比率を返します。
インスタンスメソッド
このインターフェイスには WorkletGlobalScope
から継承したメソッドがあります。
PaintWorkletGlobalScope.registerPaint()
Experimental-
CSS プロパティがファイルを指定する場合に、プログラムで画像を生成するクラスを登録します。
例
次の 3 つの例は、描画ワークレットを作成し、読み込ませ、使用することを示しています。
描画ワークレットの作成
以下にワークレットモジュールの例を示します。これは別個の js ファイルにする必要があります。registerPaint()
は描画ワークレットを参照せずに呼び出されることに注意してください。
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 ファイルから読み込み、実行することを示しています。
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);
}
仕様書
Specification |
---|
CSS Painting API Level 1 # paintworkletglobalscope |
ブラウザーの互換性
BCD tables only load in the browser