PaintWorkletGlobalScope: registerPaint() Methode

name

Der Name der zu registrierenden Worklet-Klasse.

classRef

Eine Referenz auf die Klasse, die das Worklet implementiert.

Keiner (undefined).

TypeError

Wird ausgelöst, wenn eines der Argumente ungültig oder fehlend ist.

InvalidModificationError DOMException

Wird ausgelöst, wenn bereits ein Worklet mit dem angegebenen Namen existiert.

Das folgende Beispiel zeigt die Registrierung eines Worklet-Moduls. Dies sollte in einer separaten JS-Datei erfolgen. Beachten Sie, dass registerPaint() ohne Referenz zu PaintWorkletGlobalScope aufgerufen wird. Die Datei selbst wird durch CSS.paintWorklet.addModule() geladen (dokumentiert hier in der übergeordneten Klasse von PaintWorklet, bei Worklet.addModule()).

/* checkboardWorklet.js */

class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // Use `ctx` as if it was a normal canvas
    const colors = ["red", "green", "blue"];
    const size = 32;
    for (let y = 0; y < geom.height / size; y++) {
      for (let x = 0; x < geom.width / size; x++) {
        const color = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.rect(x * size, y * size, size, size);
        ctx.fill();
      }
    }
  }
}

// Register our class under a specific name
registerPaint("checkerboard", CheckerboardPainter);

Der erste Schritt bei der Verwendung eines Paint-Worklets ist die Definition des Paint-Worklets mit der registerPaint()-Funktion, wie oben gezeigt. Um es zu verwenden, registrieren Sie es mit der Methode CSS.paintWorklet.addModule():

<script>
  CSS.paintWorklet.addModule("checkboardWorklet.js");
</script>

Sie können dann die paint() CSS-Funktion in Ihrem CSS überall dort verwenden, wo ein <image>-Wert gültig ist.

li {
  background-image: paint(checkerboard);
}

• CSS Painting API
• Houdini-APIs