CSS Painting API（CSS Houdini API の傘の一部）を使用すると、開発者は要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できます。
基本的に、CSS Painting API には、開発者が CSS の <image> の関数である {{cssxref('paint', 'paint()')}} のためのカスタム値を作成できる機能が含まれています。 次に、これらの値を {{cssxref("background-image")}} などのプロパティに適用して、要素に複雑なカスタム背景を設定できます。
例えば、次のようにです。
aside {
background-image: paint(myPaintedImage);
}
この API は {{domxref('PaintWorklet')}} を定義します。 これは、計算されたスタイルの変更に応じて画像をプログラムで生成するために使用できるワークレット（{{domxref('worklet')}}）です。 これの使用方法の詳細については、CSS Painting API の使用を参照してください。
CSS.paintWorklet を介してこのインターフェイスにアクセスします。paintWorklet のグローバル実行コンテキスト。CanvasRenderingContext2D API のサブセットを実装します。 レンダリング先のオブジェクトのサイズである出力ビットマップを持ちます。
CSS で JavaScript を使用して要素の背景に直接描画するには、registerPaint() 関数を使用してペイントワークレットを定義し、paintWorklet の addModule() メソッドを使用してワークレットを含めるようドキュメントに指示し、CSS {{cssxref('paint', '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 の {{cssxref('paint', 'paint()')}} 関数で {{cssxref('<image>')}} を使用できます。
li {
--boxColor: hsla(55, 90%, 60%, 1.0);
background-image: paint(hollowHighlights, stroke, 2px);
}
li:nth-of-type(3n) {
--boxColor: hsla(155, 90%, 60%, 1.0);
background-image: paint(hollowHighlights, filled, 3px);
}
li:nth-of-type(3n+1) {
--boxColor: hsla(255, 90%, 60%, 1.0);
background-image: paint(hollowHighlights, stroke, 1px);
}
セレクターブロックに boxColor を定義するカスタムプロパティを含めました。 PaintWorklet からカスタムプロパティにアクセスできます。
{{EmbedLiveSample("hollowExample", 300, 300)}}
| 仕様 | 状態 | コメント |
|---|---|---|
| {{SpecName('CSS Painting API')}} | {{Spec2('CSS Painting API')}} | 初期定義 |
各 CSS Painting API インターフェイスのブラウザーの互換性のデータを参照してください。