PaintWorkletGlobalScope: registerPaint() Methode

name

Der Name der Worklet-Klasse, die registriert werden soll.

classRef

Ein Verweis 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 zeigt, wie ein Beispielmodul registriert wird. Dies sollte in einer separaten JS-Datei erfolgen. Beachten Sie, dass registerPaint() ohne einen Verweis auf PaintWorkletGlobalScope aufgerufen wird. Die Datei selbst wird durch CSS.paintWorklet.addModule() geladen (dokumentiert hier in der Elternklasse 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 nutzen, registrieren Sie es mit der CSS.paintWorklet.addModule() Methode:

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

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

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

• CSS Painting API
• Houdini APIs