CSS Paint API: worklets
Skapa anpassade CSS-bakgrundsbilder och kantlinjer programmatiskt med Paint Worklets.
CSS Paint API: worklets är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad är CSS Paint API?
CSS Paint API är en CSS Houdini-funktion som låter dig skriva JavaScript-workletfunktioner för att programmatiskt generera bakgrunder, kantlinjer och masker – och på så sätt utöka vad CSS background-image kan återge.
Paint Worklet-arkitektur
En Paint Worklet är en JavaScript-fil som körs i ett separat worklet-omfång (inte i huvudtråden). Den registrerar en anpassad CSS-painter som kan användas som ett CSS-värde.
Skriva en Paint Worklet
En worklet-klass implementerar metoden paint():
<div class="grid"></div>
Registrera workleten
Läs in workleten från ditt huvudsakliga JavaScript:
<div class="grid"></div>
Använda paintern i CSS
Referera till den registrerade painterns namn i alla egenskaper som accepterar en bild:
<div class="grid"></div>
Ta emot anpassade CSS-egenskaper
Painters kan läsa anpassade CSS-egenskaper genom att deklarera dem som indatatyper:
<div class="swatch"></div>
Det canvasliknande API:et
Parametern ctx är en PaintRenderingContext2D – en begränsad version av Canvas 2D-kontexten. Du använder välbekanta metoder: fillRect, arc, bezierCurveTo med flera.
Användningsområden
CSS Paint API möjliggör:
- Komplexa geometriska bakgrunder utan SVG
- Datadrivna bakgrunder (förloppsindikatorer, aktivitetsdiagram)
- Rippleeffekter på knappar som styrs av anpassade egenskaper
- Komplexa kanteffekter (streckade, rutiga)
- Vågformade avdelare och organiska former
Paint Worklet-prestanda
Paint worklets körs utanför huvudtråden (i en separat worklet-kontext) och ritas om endast när deras anpassade CSS-egenskaper ändras. Detta är effektivare än Canvas-baserad ritning som körs på huvudtråden.
Webbläsarstöd
CSS Paint API stöds i Chrome 65+ och Edge 79+. Firefox och Safari har inte stöd för det ännu, enligt läget 2024. Använd det som en progressiv förbättring.
@supports för elegant degradering
Tillhandahåll alltid en reservlösning och använd @supports för att tillämpa paint worklet endast när det stöds:
<div class="element"></div>
Snabbkontroll
Vilken metod implementerar en CSS Paint Worklet-klass för att utföra ritningen?
Sammanfattning
CSS Paint API gör det möjligt för JavaScript-worklets att programmatiskt generera CSS-bilder. Skriv en klass med en paint()-metod, registrera den med registerPaint(), läs in den med CSS.paintWorklet.addModule() och använd den som background: paint(name). Painters kan läsa anpassade CSS-egenskaper för att skapa datadrivna visuella effekter. Tillhandahåll reservlösningar med @supports.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”CSS Paint API: worklets” gratis?
Ja – hela texten till ”CSS Paint API: worklets” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”CSS Paint API: worklets”?
Skapa anpassade CSS-bakgrundsbilder och kantlinjer programmatiskt med Paint Worklets. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”CSS Paint API: worklets”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- CSS Typed Object Model (OM)
- API:t CSS Properties and Values (@property)
- CSS Paint API: worklets
- CSS Layout API och dess omfattning