CSS Paint API: Worklets
Erstellen Sie programmgesteuert eigene CSS-Hintergrundbilder und Rahmen mit Paint Worklets.
CSS Paint API: Worklets ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist die CSS Paint API?
Die CSS Paint API ist eine CSS-Houdini-Funktion, mit der Sie JavaScript-Worklet-Funktionen schreiben können, um Hintergründe, Rahmen und Masken programmgesteuert zu erzeugen. Dadurch lässt sich praktisch erweitern, was CSS mit background-image darstellen kann.
Architektur von Paint-Worklets
Ein Paint-Worklet ist eine JavaScript-Datei, die in einem separaten Worklet-Kontext ausgeführt wird (nicht im Hauptthread). Es registriert einen benutzerdefinierten CSS-Painter, der als CSS-Wert verwendet werden kann.
Ein Paint-Worklet schreiben
Eine Worklet-Klasse implementiert die Methode paint():
<div class="grid"></div>
Das Worklet registrieren
Laden Sie das Worklet aus Ihrem Haupt-JavaScript:
<div class="grid"></div>
Den Painter in CSS verwenden
Verweisen Sie in jeder Eigenschaft, die ein Bild akzeptiert, auf den Namen des registrierten Painters:
<div class="grid"></div>
CSS-benutzerdefinierte Eigenschaften empfangen
Painter können benutzerdefinierte CSS-Eigenschaften lesen, indem Sie sie als Eingabeeigenschaften deklarieren:
<div class="swatch"></div>
Die Canvas-ähnliche API
Der Parameter ctx ist ein PaintRenderingContext2D – eine eingeschränkte Version des Canvas-2D-Kontexts. Sie verwenden vertraute Methoden: fillRect, arc, bezierCurveTo usw.
Anwendungsfälle
Die CSS Paint API ermöglicht:
- Komplexe geometrische Hintergründe ohne SVG
- Hintergründe mit variablen Daten (Fortschrittsbalken, Aktivitätsdiagramme)
- Ripple-Effekte auf Schaltflächen, die durch benutzerdefinierte Eigenschaften gesteuert werden
- Komplexe Rahmeneffekte (gestrichelt, schraffiert)
- Wellenförmige Trennlinien und organische Formen
Performance von Paint Worklets
Paint Worklets werden außerhalb des Haupt-Threads (in einem separaten Worklet-Kontext) ausgeführt und nur dann neu gezeichnet, wenn sich ihre benutzerdefinierten CSS-Eigenschaften ändern. Das ist effizienter als Canvas-basierte Zeichnungen, die im Haupt-Thread ausgeführt werden.
Browser-Unterstützung
Die CSS Paint API wird in Chrome 65+ und Edge 79+ unterstützt. Firefox und Safari unterstützen sie seit 2024 nicht. Verwenden Sie sie als progressive Verbesserung.
@supports für graceful degradation
Stellen Sie immer einen Fallback bereit und verwenden Sie @supports, um das Paint Worklet nur anzuwenden, wenn es unterstützt wird:
<div class="element"></div>
Kurze Überprüfung
Welche Methode implementiert eine CSS-Paint-Worklet-Klasse, um Zeichnungen auszuführen?
Zusammenfassung
Mit der CSS Paint API können JavaScript-Worklets programmgesteuert CSS-Bilder erzeugen. Schreiben Sie eine Klasse mit einer paint()-Methode, registrieren Sie sie mit registerPaint(), laden Sie sie mit CSS.paintWorklet.addModule() und verwenden Sie sie als background: paint(name). Painter können benutzerdefinierte CSS-Eigenschaften auslesen, um datenabhängige Visualisierungen zu erstellen. Stellen Sie mit @supports Fallbacks bereit.
Häufig gestellte Fragen
Ist die Lektion „CSS Paint API: Worklets“ kostenlos?
Ja — der vollständige Text von „CSS Paint API: Worklets“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „CSS Paint API: Worklets“?
Erstellen Sie programmgesteuert eigene CSS-Hintergrundbilder und Rahmen mit Paint Worklets. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „CSS Paint API: Worklets“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das CSS Typed Object Model (OM)
- CSS Properties and Values API (@property)
- CSS Paint API: Worklets
- CSS Layout API und Geltungsbereich