PaintWorkletGlobalScope: registerPaint()-Methode
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 registerPaint()-Methode der PaintWorkletGlobalScope-Schnittstelle registriert eine Klasse, die programmgesteuert 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. Dieser 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. Anschließend laden Sie es mit der Methode CSS.paintWorklet.addModule():
CSS.paintWorklet.addModule("checkboardWorklet.js");
Danach können Sie die CSS-Funktion paint() überall dort in Ihrem CSS verwenden, wo ein <image>-Wert gültig ist.
li {
background-image: paint(checkerboard);
}
Spezifikationen
| Spezifikation |
|---|
| CSS Painting API Level 1 # dom-paintworkletglobalscope-registerpaint |