PaintWorkletGlobalScope

Datenschutzbedenken

Um das Ausspähen besuchter Links zu vermeiden, ist diese Funktion derzeit in Browsern auf Chrome-Basis für <a>-Elemente mit einem href-Attribut sowie für deren Kinder deaktiviert. Einzelheiten finden Sie in Folgendem:

• Der Abschnitt Überlegungen zum Datenschutz der CSS Painting API
• Das CSS Painting API Spezifikations-Problem "CSS Paint API leaks browsing history"

Instanzeigenschaften

Diese Schnittstelle erbt Eigenschaften von WorkletGlobalScope.

PaintWorkletGlobalScope.devicePixelRatio Schreibgeschützt Experimentell

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

Instanzmethoden

Diese Schnittstelle erbt Methoden von WorkletGlobalScope.

PaintWorkletGlobalScope.registerPaint() Experimentell

Registriert eine Klasse zur programmatischen Generierung eines Bildes, 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-Worklet

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

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-Worklet

Das folgende Beispiel zeigt, wie das obige Worklet aus seiner js-Datei geladen wird und dies durch Feature-Erkennung tut.

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

Verwenden eines Paint-Worklet

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

textarea {
  background-image: url("checkerboard.png"); /* Fallback */
  background-image: paint(checkerboard);
}

Sie können auch die @supports at-rule verwenden.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung der CSS Painting API
• CSS Painting API
• Houdini APIs