API CSS Paint: worklets
Cree imágenes de fondo y bordes CSS personalizados mediante programación con Paint Worklets.
API CSS Paint: worklets es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es CSS Paint API?
CSS Paint API es una funcionalidad de CSS Houdini que permite escribir funciones de worklet en JavaScript para generar fondos, bordes y máscaras mediante programación, ampliando de forma efectiva lo que puede representar la propiedad CSS background-image.
Arquitectura de Paint Worklet
Un Paint Worklet es un archivo de JavaScript que se ejecuta en un ámbito de worklet independiente (no en el hilo principal). Registra un pintor CSS personalizado que se puede usar como valor de CSS.
Escribir un Paint Worklet
Una clase de worklet implementa el método paint():
<div class="grid"></div>
Registrar el worklet
Cargue el worklet desde su JavaScript principal:
<div class="grid"></div>
Usar el pintor en CSS
Haga referencia al nombre del pintor registrado en cualquier propiedad que acepte una imagen:
<div class="grid"></div>
Recibir propiedades personalizadas de CSS
Los pintores pueden leer propiedades personalizadas de CSS declarándolas como propiedades de entrada:
<div class="swatch"></div>
La API similar a Canvas
El parámetro ctx es un PaintRenderingContext2D: una versión restringida del contexto 2D de Canvas. Se utilizan métodos conocidos como fillRect, arc, bezierCurveTo, etc.
Casos de uso
CSS Paint API permite:
- Fondos geométricos complejos sin SVG
- Fondos basados en datos variables (barras de progreso, gráficos de actividad)
- Efectos de onda en botones controlados mediante propiedades personalizadas
- Efectos complejos para bordes (discontinuos, tramados)
- Divisores ondulados y formas orgánicas
Rendimiento de Paint Worklet
Los paint worklets se ejecutan fuera del hilo principal (en un contexto de worklet independiente) y solo vuelven a pintar cuando cambian sus propiedades personalizadas de CSS. Esto es más eficiente que dibujar con Canvas, ya que Canvas se ejecuta en el hilo principal.
Compatibilidad de navegadores
CSS Paint API es compatible con Chrome 65+ y Edge 79+. Firefox y Safari no lo admiten a fecha de 2024. Úselo como mejora progresiva.
@supports para una degradación progresiva
Proporcione siempre una alternativa y use @supports para aplicar el paint worklet únicamente cuando sea compatible:
<div class="element"></div>
Comprobación rápida
¿Qué método implementa una clase de CSS Paint Worklet para realizar el dibujo?
Repaso
CSS Paint API permite que los worklets de JavaScript generen imágenes CSS mediante programación. Escriba una clase con un método paint(), regístrela con registerPaint(), cárguela con CSS.paintWorklet.addModule() y úsela como background: paint(name). Los elementos de dibujo pueden leer propiedades personalizadas de CSS para crear elementos visuales basados en datos. Proporcione alternativas con @supports.
Preguntas frecuentes
¿La lección «API CSS Paint: worklets» es gratis?
Sí — el texto completo de «API CSS Paint: worklets» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «API CSS Paint: worklets»?
Cree imágenes de fondo y bordes CSS personalizados mediante programación con Paint Worklets. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «API CSS Paint: worklets»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El modelo de objetos tipado de CSS (OM)
- API de propiedades y valores CSS (@property)
- API CSS Paint: worklets
- API CSS Layout y su alcance