CSS Painting API

Im Wesentlichen enthält die CSS Painting API Funktionen, die es Entwicklern ermöglichen, benutzerdefinierte Werte für paint(), eine CSS-Funktion <image>, zu erstellen. Diese Werte können dann auf Eigenschaften wie background-image angewendet werden, um komplexe benutzerdefinierte Hintergründe auf einem Element zu setzen.

Zum Beispiel:

aside {
  background-image: paint(myPaintedImage);
}

Die API definiert einen worklet, der verwendet werden kann, um programmgesteuert ein Bild zu generieren, das auf berechnete Stiländerungen reagiert. Um mehr darüber zu erfahren, wie dies verwendet wird, konsultieren Sie Verwendung der CSS Painting API.

PaintWorkletGlobalScope

Der globale Ausführungskontext des Paint Worklets.

PaintRenderingContext2D

Implementiert einen Teil der API CanvasRenderingContext2D. Sie hat ein Ausgabebild, das die Größe des Objekts hat, zu dem sie rendert.

PaintSize

Gibt die schreibgeschützten Werte der Breite und Höhe des Ausgabebildes zurück.

Das folgende Beispiel erstellt eine Liste von Elementen mit einem Hintergrundbild, das zwischen drei verschiedenen Farben und drei Breiten wechselt. In einem unterstützenden Browser sehen Sie etwas wie das untenstehende Bild.

Um dies zu erreichen, definieren wir zwei benutzerdefinierte CSS-Eigenschaften, --boxColor und --widthSubtractor.

Das Worklet ist eine externe JavaScript-Datei (in diesem Fall haben wir es boxbg.js genannt), das ein Paint worklet definiert. Mit dem Worklet können wir auf CSS-Eigenschaften (und benutzerdefinierte Eigenschaften) von Elementen zugreifen:

registerPaint(
  "boxbg",
  class {
    static get contextOptions() {
      return { alpha: true };
    }
    /*
      Retrieve any custom properties (or regular properties,
      such as 'height') defined for the element, and return
      them as an array.
    */
    static get inputProperties() {
      return ["--boxColor", "--widthSubtractor"];
    }

    paint(ctx, size, props) {
      /*
        ctx -> drawing context
        size -> paintSize: width and height
        props -> properties: get() method
      */
      ctx.fillStyle = props.get("--boxColor");
      ctx.fillRect(
        0,
        size.height / 3,
        size.width * 0.4 - props.get("--widthSubtractor"),
        size.height * 0.6,
      );
    }
  },
);

Wir haben die Methode inputProperties() in der Klasse registerPaint() verwendet, um die Werte von zwei benutzerdefinierten Eigenschaften zu erhalten, die auf einem Element festgelegt wurden, das boxbg angewendet hat, und diese dann in unserer Funktion paint() verwendet. Die Methode inputProperties() kann alle Eigenschaften zurückgeben, die das Element beeinflussen, nicht nur benutzerdefinierte Eigenschaften.

HTML

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item N</li>
</ul>

CSS

In unserem CSS definieren wir die benutzerdefinierten Eigenschaften --boxColor und --widthSubtractor.

body {
  font: 1.2em / 1.2 sans-serif;
}
li {
  background-image: paint(boxbg);
  --boxColor: hsl(55 90% 60%);
}

li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60%);
  --widthSubtractor: 20;
}

li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60%);
  --widthSubtractor: 40;
}

JavaScript

Das Setup und die Logik des Paint Worklets befinden sich im externen Skript. Um das Worklet zu registrieren, müssen wir addModule() aus unserem Hauptskript aufrufen:

CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js",
);

In diesem Beispiel wird das Worklet unter https://mdn.github.io/ gehostet, aber Ihr Worklet kann eine relative Ressource wie folgt sein:

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

Ergebnis

Auch wenn Sie nicht mit dem Skript des Worklets spielen können, können Sie die Werte der benutzerdefinierten Eigenschaften in den DevTools ändern, um die Farben und die Breite des Hintergrundbildes zu ändern.

• Verwendung der CSS Painting API
• CSS Typed Object Model API
• Houdini APIs