CSS Painting API
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
CSS Painting API（CSS Houdini API の傘の一部）を使用すると、開発者は要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できます。
概念と使用方法
基本的に、CSS Painting API には、開発者が CSS の <image> の関数である paint() のためのカスタム値を作成できる機能が含まれています。 次に、これらの値を background-image などのプロパティに適用して、要素に複雑なカスタム背景を設定できます。
例えば、次のようにです。
aside {
background-image: paint(myPaintedImage);
}
この API は PaintWorklet を定義します。 これは、計算されたスタイルの変更に応じて画像をプログラムで生成するために使用できるワークレット（worklet）です。 これの使用方法の詳細については、CSS Painting API の使用を参照してください。
インターフェイス
PaintWorklet-
CSS プロパティがファイルを予期している画像をプログラムで生成します。
CSS.paintWorkletを介してこのインターフェイスにアクセスします。 PaintWorkletGlobalScope-
paintWorkletのグローバル実行コンテキスト。 PaintRenderingContext2D-
CanvasRenderingContext2D API のサブセットを実装します。 レンダリング先のオブジェクトのサイズである出力ビットマップを持ちます。
PaintSize-
出力ビットマップの幅と高さの読み取り専用の値を返します。
ディクショナリ
PaintRenderingContext2DSettings-
CanvasRenderingContext2D 設定のサブセットを提供するディクショナリ。
例
CSS で JavaScript を使用して要素の背景に直接描画するには、registerPaint() 関数を使用してペイントワークレットを定義し、paintWorklet の addModule() メソッドを使用してワークレットを含めるようドキュメントに指示し、CSS paint() 関数を使用して作成した画像を含めます。
registerPaint() 関数を使用して、'hollowHighlights' という PaintWorklet を作成します。
registerPaint(
"hollowHighlights",
class {
static get inputProperties() {
return ["--boxColor"];
}
static get inputArguments() {
return ["*", "<length>"];
}
static get contextOptions() {
return { alpha: true };
}
paint(ctx, size, props, args) {
const x = 0;
const y = size.height * 0.3;
const blockWidth = size.width * 0.33;
const blockHeight = size.height * 0.85;
const theColor = props.get("--boxColor");
const strokeType = args[0].toString();
const strokeWidth = parseInt(args[1]);
console.log(theColor);
if (strokeWidth) {
ctx.lineWidth = strokeWidth;
} else {
ctx.lineWidth = 1.0;
}
if (strokeType === "stroke") {
ctx.fillStyle = "transparent";
ctx.strokeStyle = theColor;
} else if (strokeType === "filled") {
ctx.fillStyle = theColor;
ctx.strokeStyle = theColor;
} else {
ctx.fillStyle = "none";
ctx.strokeStyle = "none";
}
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(blockWidth, y);
ctx.lineTo(blockWidth + blockHeight, blockHeight);
ctx.lineTo(x, blockHeight);
ctx.lineTo(x, y);
ctx.closePath();
ctx.fill();
ctx.stroke();
for (let i = 0; i < 4; i++) {
let start = i * 2;
ctx.beginPath();
ctx.moveTo(blockWidth + start * 10 + 10, y);
ctx.lineTo(blockWidth + start * 10 + 20, y);
ctx.lineTo(blockWidth + start * 10 + 20 + blockHeight, blockHeight);
ctx.lineTo(blockWidth + start * 10 + 10 + blockHeight, blockHeight);
ctx.lineTo(blockWidth + start * 10 + 10, y);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}
},
);
次に、paintWorklet を含めます。
CSS.paintWorklet.addModule(
"https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
次に、CSS の paint() 関数で <image> を使用できます。
li {
--boxColor: hsla(55, 90%, 60%, 1);
background-image: paint(hollowHighlights, stroke, 2px);
}
li:nth-of-type(3n) {
--boxColor: hsla(155, 90%, 60%, 1);
background-image: paint(hollowHighlights, filled, 3px);
}
li:nth-of-type(3n + 1) {
--boxColor: hsla(255, 90%, 60%, 1);
background-image: paint(hollowHighlights, stroke, 1px);
}
セレクターブロックに boxColor を定義するカスタムプロパティを含めました。 PaintWorklet からカスタムプロパティにアクセスできます。
仕様書
| Specification |
|---|
| CSS Painting API Level 1 # paintworkletglobalscope |
ブラウザーの互換性
各 CSS Painting API インターフェイスのブラウザーの互換性のデータを参照してください。