API Paint CSS: Worklet

CSS Paint API adalah fitur CSS Houdini yang memungkinkan Anda menulis fungsi worklet JavaScript untuk menghasilkan latar belakang, batas, dan topeng secara terprogram — yang secara efektif memperluas kemampuan yang dapat dirender oleh background-image CSS.

Paint Worklet adalah berkas JavaScript yang berjalan dalam cakupan worklet terpisah (bukan utas utama). Worklet ini mendaftarkan pelukis CSS kustom yang dapat digunakan sebagai nilai CSS.

Kelas worklet mengimplementasikan metode paint():

Muat worklet dari JavaScript utama Anda:

Referensikan nama pelukis yang terdaftar dalam properti apa pun yang menerima gambar:

Pelukis dapat membaca properti kustom CSS dengan mendeklarasikannya sebagai properti masukan:

Parameter ctx adalah PaintRenderingContext2D — versi terbatas dari konteks Canvas 2D. Anda menggunakan metode yang sudah dikenal: fillRect, arc, bezierCurveTo, dan sebagainya.

API Pengecatan CSS memungkinkan:

• Latar belakang geometris kompleks tanpa SVG
• Latar belakang dengan data variabel (bilah kemajuan, grafik aktivitas)
• Efek riak pada tombol yang digerakkan oleh properti khusus
• Efek batas kompleks (putus-putus, berarsir)
• Pemisah bergelombang dan bentuk organik

Worklet pengecatan berjalan di luar thread utama (dalam konteks worklet terpisah) dan hanya menggambar ulang ketika properti khusus CSS-nya berubah. Ini lebih efisien daripada penggambaran berbasis Canvas yang berjalan di thread utama.

API Pengecatan CSS didukung di Chrome 65+ dan Edge 79+. Firefox dan Safari belum mendukungnya hingga 2024. Gunakan sebagai peningkatan progresif.

Selalu sediakan mekanisme cadangan dan gunakan @supports untuk menerapkan worklet pengecatan hanya ketika didukung:

API Pengecatan CSS memungkinkan worklet JavaScript menghasilkan gambar CSS secara terprogram. Tulis sebuah kelas dengan metode paint(), daftarkan dengan registerPaint(), muat dengan CSS.paintWorklet.addModule(), lalu gunakan sebagai background: paint(name). Pelukis dapat membaca properti khusus CSS untuk membuat visual berbasis data. Sediakan mekanisme cadangan dengan @supports.