API Cat CSS: Worklet

API Paint CSS ialah ciri CSS Houdini yang membolehkan anda menulis fungsi worklet JavaScript untuk menjana latar belakang, sempadan dan topeng secara teratur — sekali gus meluaskan perkara yang boleh dipaparkan oleh background-image CSS.

Paint Worklet ialah fail JavaScript yang berjalan dalam skop worklet berasingan (bukan pada utas utama). Ia mendaftarkan pelukis CSS tersuai yang boleh digunakan sebagai nilai CSS.

Kelas worklet melaksanakan kaedah paint():

Muatkan worklet daripada JavaScript utama anda:

Rujuk nama pelukis yang didaftarkan dalam mana-mana sifat yang menerima imej:

Pelukis boleh membaca sifat tersuai CSS dengan mengisytiharkannya sebagai sifat masukan:

Parameter ctx ialah PaintRenderingContext2D — versi terhad konteks Canvas 2D. Anda menggunakan kaedah yang biasa: fillRect, arc, bezierCurveTo dan sebagainya.

API Lukisan CSS membolehkan:

• Latar belakang geometri kompleks tanpa SVG
• Latar belakang berasaskan data berubah-ubah (bar kemajuan, graf aktiviti)
• Kesan riak pada butang yang didorong oleh sifat tersuai
• Kesan jidar kompleks (bergaris putus-putus, berpalang silang)
• Pembahagi beralun dan bentuk organik

Worklet lukisan dijalankan di luar utas utama (dalam konteks worklet berasingan) dan hanya dilukis semula apabila sifat tersuai CSS berubah. Ini lebih cekap berbanding lukisan berasaskan Canvas yang dijalankan pada utas utama.

API Lukisan CSS disokong dalam Chrome 65+ dan Edge 79+. Firefox dan Safari tidak menyokongnya setakat 2024. Gunakannya sebagai peningkatan progresif.

Sentiasa sediakan sandaran dan gunakan @supports untuk menggunakan worklet lukisan hanya apabila disokong:

API Lukisan CSS membolehkan worklet JavaScript menjana imej CSS secara terprogram. Tulis kelas dengan kaedah paint(), daftarkannya menggunakan registerPaint(), muatkannya menggunakan CSS.paintWorklet.addModule(), dan gunakannya sebagai background: paint(name). Pelukis boleh membaca sifat tersuai CSS untuk mencipta visual berasaskan data. Sediakan sandaran dengan @supports.