PaintWorkletGlobalScope

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das PaintWorkletGlobalScope-Interface der CSS Painting API repräsentiert das globale Objekt, das innerhalb eines Paint-Worklet verfügbar ist.

Datenschutzbedenken

Um zu vermeiden, dass besuchte Links offengelegt werden, ist diese Funktion derzeit in Chrome-basierten Browsern für <a>-Elemente mit einem href-Attribut sowie für deren Kind-Elemente deaktiviert. Weitere Details finden Sie unter:

Instanzeigenschaften

Dieses Interface erbt Eigenschaften von WorkletGlobalScope.

PaintWorkletGlobalScope.devicePixelRatio Schreibgeschützt

Gibt das Verhältnis der physischen Pixel zu logischen Pixeln des aktuellen Geräts zurück.

Instanzmethoden

Dieses Interface erbt Methoden von WorkletGlobalScope.

PaintWorkletGlobalScope.registerPaint()

Registriert eine Klasse, um programmgesteuert ein Bild zu erzeugen, wo eine CSS-Eigenschaft eine Datei erwartet.

Beispiele

Die folgenden drei Beispiele zeigen zusammen das Erstellen, Laden und Verwenden eines Paint-Worklet.

Erstellen eines Paint-Worklets

Das folgende Beispiel zeigt ein Worklet-Modul. Dies sollte in einer separaten js-Datei sein. Beachten Sie, dass registerPaint() ohne Referenz auf ein Paint-Worklet aufgerufen wird.

js
class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // The global object here is a PaintWorkletGlobalScope
    // Methods and properties can be accessed directly
    // as global features or prefixed using self
    const dpr = self.devicePixelRatio;

    // 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);

Laden eines Paint-Worklets

Das folgende Beispiel demonstriert das Laden des oben angegebenen Worklets aus seiner js-Datei und tut dies durch Feature-Erkennung.

js
if ("paintWorklet" in CSS) {
  CSS.paintWorklet.addModule("checkerboard.js");
}

Verwendung eines Paint-Worklets

Dieses Beispiel zeigt, wie ein Paint-Worklet in einem Stylesheet verwendet wird, einschließlich der einfachsten Methode, um eine Fallback-Lösung bereitzustellen, falls CSS.paintWorklet nicht unterstützt wird.

html
<style>
  textarea {
    background-image: url(checkerboard);
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>

Sie können auch die @supports-Regel verwenden.

css
@supports (background: paint(id)) {
  background-image: paint(checkerboard);
}

Spezifikationen

Specification
CSS Painting API Level 1
# paintworkletglobalscope

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch