零弐壱蜂

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

3 min read
CSS Paint API
hiroweb developer

概要

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

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

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

完成品

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

これが竈門炭治郎だ。

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

実装方法

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

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

IEEdgeFirefoxChromeSafari
✗79✗65✗

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

  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);

registerPaint に KamadoTanjiro という名称で登録する。

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 を書かないか？

参考