CSS Painting API

CSS Painting API（CSS Houdini API の傘の一部）を使用すると、開発者は要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できます。

概念と使用方法

基本的に、CSS Painting API には、開発者が CSS の <image> の関数である paint() のためのカスタム値を作成できる機能が含まれています。 次に、これらの値を background-image などのプロパティに適用して、要素に複雑なカスタム背景を設定できます。

例えば、次のようにです。

css
aside {
  background-image: paint(myPaintedImage);
}

この API は PaintWorklet (en-US) を定義します。 これは、計算されたスタイルの変更に応じて画像をプログラムで生成するために使用できるワークレット（worklet）です。 これの使用方法の詳細については、CSS Painting API の使用を参照してください。

インターフェイス

PaintWorklet (en-US)

CSS プロパティがファイルを予期している画像をプログラムで生成します。 CSS.paintWorklet を介してこのインターフェイスにアクセスします。

PaintWorkletGlobalScope (en-US)

paintWorklet のグローバル実行コンテキスト。

PaintRenderingContext2D

CanvasRenderingContext2D API のサブセットを実装します。 レンダリング先のオブジェクトのサイズである出力ビットマップを持ちます。

PaintSize

出力ビットマップの幅と高さの読み取り専用の値を返します。

ディクショナリ

PaintRenderingContext2DSettings

CanvasRenderingContext2D 設定のサブセットを提供するディクショナリ。

例

CSS で JavaScript を使用して要素の背景に直接描画するには、registerPaint() (en-US) 関数を使用してペイントワークレットを定義し、paintWorklet の addModule() メソッドを使用してワークレットを含めるようドキュメントに指示し、CSS paint() 関数を使用して作成した画像を含めます。

registerPaint() (en-US) 関数を使用して、'hollowHighlights' という PaintWorklet を作成します。

js
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 を含めます。

js
CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);

次に、CSS の paint() 関数で <image> を使用できます。

css
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 インターフェイスのブラウザーの互換性のデータを参照してください。

関連情報