CSS Paint API: Worklets

CSS Paint API は CSS Houdini の機能で、JavaScript の Worklet 関数を記述して背景、境界線、マスクをプログラムで生成できます。実質的に、CSS の background-image で描画できる内容を拡張するものです。

Paint Worklet は、別の Worklet スコープ（メインスレッドではありません）で実行される JavaScript ファイルです。CSS の値として使用できるカスタムペインターを登録します。

Worklet クラスは paint() メソッドを実装します。

メインの JavaScript から Worklet を読み込みます。

画像を受け取る任意のプロパティで、登録したペインター名を参照します。

ペインターは、入力プロパティとして宣言することで CSS カスタムプロパティを読み取れます。

ctx パラメーターは PaintRenderingContext2D です。これは Canvas 2D コンテキストの制限されたバージョンです。fillRect、arc、bezierCurveTo など、使い慣れたメソッドを使用できます。

CSS Paint API で可能になること：

• SVG を使わない複雑な幾何学的背景
• 可変データに対応した背景（進捗バー、アクティビティグラフ）
• カスタムプロパティで駆動するボタンのリップルエフェクト
• 複雑なボーダー効果（破線、ハッチング）
• 波形の区切り線と有機的な形状

ペイントワークレットはメインスレッド外（別のワークレットコンテキスト）で実行され、CSS カスタムプロパティが変更された場合にのみ再描画されます。これは、メインスレッドで実行される Canvas ベースの描画よりも効率的です。

CSS Paint API は Chrome 65 以降と Edge 79 以降でサポートされています。2024 年時点では Firefox と Safari はサポートしていません。段階的拡張として使用してください。

必ずフォールバックを用意し、サポートされている場合にのみペイントワークレットを適用するために @supports を使用してください：

描画を実行するために、CSS Paint Worklet クラスが実装するメソッドは何ですか？

CSS Paint API を使用すると、JavaScript ワークレットで CSS イメージをプログラムから生成できます。paint() メソッドを持つクラスを作成し、registerPaint() で登録して、CSS.paintWorklet.addModule() で読み込み、background: paint(name) として使用します。ペインターは CSS カスタムプロパティを読み取り、データに応じて変化するビジュアルを作成できます。@supports でフォールバックを用意してください。