PaintWorkletGlobalScope: Methode registerPaint()
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die Methode registerPaint() der Schnittstelle PaintWorkletGlobalScope registriert eine Klasse, die programmatisch ein Bild erzeugt, wenn eine CSS-Eigenschaft eine Bilddatei erwartet.
Syntax
registerPaint(name, classRef)
Parameter
Rückgabewert
Keiner (undefined).
Ausnahmen
TypeError-
Wird ausgelöst, wenn eines der Argumente ungültig ist oder fehlt.
InvalidModificationErrorDOMException-
Wird ausgelöst, wenn bereits ein Worklet mit dem angegebenen Namen existiert.
Beispiele
Das folgende Beispiel zeigt die Registrierung eines Worklet-Moduls. Der Code sollte sich in einer separaten JavaScript-Datei befinden. Beachten Sie, dass registerPaint() ohne Referenz auf PaintWorkletGlobalScope aufgerufen wird. Die Datei selbst wird über CSS.paintWorklet.addModule() geladen (dokumentiert unter Worklet.addModule(), einer Methode der übergeordneten Klasse von PaintWorklet).
/* 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 besteht darin, es mit der Funktion registerPaint() zu definieren, wie oben gezeigt. Um es zu verwenden, registrieren Sie es mit der Methode CSS.paintWorklet.addModule():
CSS.paintWorklet.addModule("checkboardWorklet.js");
Anschließend können Sie die CSS-Funktion paint() überall in Ihrem CSS verwenden, wo ein Wert vom Typ <image> zulässig ist.
li {
background-image: paint(checkerboard);
}
Spezifikationen
| Spezifikation |
|---|
| CSS Painting API Level 1 # dom-paintworkletglobalscope-registerpaint |