竈門炭治郎をCSS Paint APIで再現する

本稿は、ZOZO #4 Advent Calendar 2021 1日目の記事です。

概要

昨年は、CSS のbackground-imageで竈門炭治郎を再現させた。

参考: 竈門炭治郎を CSS だけで再現する


今回は、竈門炭治郎(緑と黒の市松模様)を CSS Paint API で再現してみる。

完成品

まず完成したものをお見せする。

これが竈門炭治郎だ。

※ ChromeやEdgeで閲覧した場合、「透き通る世界」になってしまうので注意

実装方法

CSS Paint APIを利用すると、CSS だけでは表現が難しいような画像を動的に作成できる。
また、background-image, border-image, mask-image などの CSS プロパティから利用できる。

ただし、ブラウザのサポート範囲が限定的なため利用には注意が必要。

IEEdgeFirefoxChromeSafari
7965

実装は大まかに下記のような流れで行う。

  1. Worklet を定義する
  2. Worklet を登録する
  3. CSS の関数(paint())で読み込む

Worklet を実装する

Worklet には任意のクラス名で実装をする(ここではclass Painter)。
クラスフィールドには、paint()メソッドを用意して、registerPaintメソッドでクラスと識別子の関連付けを行う。

// painter.js
class Painter {
  /**
   * @param context {CanvasRenderingContext2D}
   * @param geometry {{width:number, height:number}}
   * @param prop properties: get()
   */
  paint(context, geometry, prop) {
    const color1 = "#58ba97";
    const color2 = "#2c2421";
    const units = 200;

    for (let x = 0; x < geometry.width; x += units) {
      for (let y = 0; y < geometry.height; y += units) {
        context.fillStyle = (x + y) % (units * 2) === 0 ? color1 : color2;
        context.fillRect(x, y, units, units);
      }
    }
  }
}

registerPaint("KamadoTanjiro", Painter);

registerPaintKamadoTanjiro という名称で登録する。

Worklet を登録する

CSS.paintWorklet.addModule()メソッドを利用して Worklet を登録する。

CSS.paintWorklet.addModule("painter.js");

引数には Worklet を定義したファイルを指定する。

CSS で描画 Worklet を参照する

background-imageプロパティにpaintメソッドを利用して Worklet を参照する。
paintメソッドには、registerPaintで登録した識別子(KamadoTanjiro)を指定する。

body {
  width: 100vw;
  height: 100vh;
  background-image: paint(KamadoTanjiro);
}

── お前も CSS を書かないか?

参考