PaintWorkletGlobalScope: registerPaint() Methode

name

Der Name der zu registrierenden Worklet-Klasse.

classRef

Ein Verweis auf die Klasse, die das Worklet implementiert.

Keiner (undefined).

TypeError

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

InvalidModificationError DOMException

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

Das folgende Beispiel zeigt die Registrierung eines Beispiel-Worklet-Moduls. Dies sollte in einer separaten JavaScript-Datei erfolgen. Beachten Sie, dass registerPaint() ohne einen Verweis auf PaintWorkletGlobalScope aufgerufen wird. Die Datei selbst wird über 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 mithilfe der Funktion registerPaint(), 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 überall in Ihrem CSS verwenden, wo ein <image> Wert gültig ist.

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

• CSS Painting API
• Houdini APIs