CSS Paint API: Worklets

CSS Paint API er en CSS Houdini-funktion, der giver dig mulighed for at skrive JavaScript-workletfunktioner, som programmatisk genererer baggrunde, kanter og masker — og i praksis udvider det, som CSS background-image kan gengive.

Et Paint Worklet er en JavaScript-fil, der kører i et separat worklet-omfang (ikke i hovedtråden). Det registrerer en brugerdefineret CSS-tegner, som kan bruges som en CSS-værdi.

En worklet-klasse implementerer metoden paint():

Indlæs worklettet fra din primære JavaScript:

Referér til navnet på den registrerede tegner i enhver egenskab, der accepterer et billede:

Tegnere kan læse brugerdefinerede CSS-egenskaber ved at deklarere dem som inddataegenskaber:

Parameteren ctx er en PaintRenderingContext2D — en begrænset version af Canvas 2D-konteksten. Du bruger velkendte metoder: fillRect, arc, bezierCurveTo osv.

CSS Paint API gør det muligt at:

• Skabe komplekse geometriske baggrunde uden SVG
• Skabe baggrunde baseret på variable data (statusbjælker, aktivitetsgrafer)
• Skabe bølgeeffekter på knapper styret af brugerdefinerede egenskaber
• Skabe komplekse kanter (stiplede, skraverede)
• Skabe bølgede skillelinjer og organiske former

Paint worklets kører uden for hovedtråden (i en separat worklet-kontekst) og gentegner kun, når deres brugerdefinerede CSS-egenskaber ændres. Det er mere effektivt end Canvas-baseret tegning, der kører på hovedtråden.

CSS Paint API understøttes i Chrome 65+ og Edge 79+. Firefox og Safari understøtter det ikke pr. 2024. Brug det som en progressiv forbedring.

Tilbyd altid en alternativ løsning, og brug @supports til kun at anvende paint worklet, når det understøttes:

CSS Paint API gør det muligt for JavaScript-worklets programmatisk at generere CSS-billeder. Skriv en klasse med en paint()-metode, registrer den med registerPaint(), indlæs den med CSS.paintWorklet.addModule(), og brug den som background: paint(name). Painters kan læse brugerdefinerede CSS-egenskaber for at skabe datadrevne visuelle elementer. Tilbyd alternative løsninger med @supports.