Bilder mit CSS programmieren
06.02.2022, 16:18 Uhr
Paint API for the world
Die Paint API ist die am besten unterstützte API aus dem Houdini-Projekt.
Mit der Paint API können Sie überall dort, wo Sie in CSS ein Bild benutzen, die paint()-Funktion einsetzen und mit dieser auf ein per JavaScript programmiertes Bild verweisen. paint() wird beim Rendern des Elements ausgeführt. Außerdem läuft paint() neu ab, wenn die Ausmaße des Elements oder Custom Properties sich ändern oder ähnliche Situationen ein Update erfordern. Mit dieser API lassen sich komplexe Bilder erstellen, die flexibel und responsiv sind.
Ein weiterer großer Vorteil der Paint API ist, dass diese Paint Worklets außerhalb des Haupt-Browser-Threads laufen. Sie blockieren daher nicht die Darstellung und haben keine negative Auswirkung auf die Performance. Zudem brauchen Sie für die über die Paint API erzeugten Bilder keine zusätzlichen DOM-Elemente.
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar