CSS Paint API: เวิร์กเล็ต
สร้างภาพพื้นหลังและเส้นขอบ CSS แบบกำหนดเองด้วยโปรแกรม โดยใช้ Paint Worklets
CSS Paint API: เวิร์กเล็ต เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
CSS Paint API คืออะไร
CSS Paint API เป็นความสามารถของ CSS Houdini ที่ให้คุณเขียนฟังก์ชันเวิร์กเล็ต JavaScript เพื่อสร้างพื้นหลัง เส้นขอบ และมาสก์โดยใช้โปรแกรม — ซึ่งเท่ากับเป็นการขยายสิ่งที่ CSS background-image สามารถแสดงผลได้
สถาปัตยกรรมของ Paint Worklet
Paint Worklet คือไฟล์ JavaScript ที่ทำงานในขอบเขตเวิร์กเล็ตแยกต่างหาก (ไม่ใช่เธรดหลัก) โดยลงทะเบียนโปรแกรมวาด CSS แบบกำหนดเองที่สามารถใช้เป็นค่าของ CSS ได้
การเขียน Paint Worklet
คลาสของเวิร์กเล็ตจะนำเมธอด paint() ไปใช้:
<div class="grid"></div>
การลงทะเบียนเวิร์กเล็ต
โหลดเวิร์กเล็ตจาก JavaScript หลักของคุณ:
<div class="grid"></div>
การใช้โปรแกรมวาดใน CSS
อ้างอิงชื่อโปรแกรมวาดที่ลงทะเบียนแล้วในคุณสมบัติใด ๆ ที่ยอมรับรูปภาพ:
<div class="grid"></div>
การรับคุณสมบัติแบบกำหนดเองของ CSS
โปรแกรมวาดสามารถอ่านคุณสมบัติแบบกำหนดเองของ CSS ได้โดยประกาศคุณสมบัติเหล่านั้นเป็นค่าข้อมูลเข้า:
<div class="swatch"></div>
API ลักษณะเดียวกับผืนผ้าใบ
พารามิเตอร์ ctx คือ PaintRenderingContext2D ซึ่งเป็นบริบท Canvas 2D รุ่นจำกัด คุณใช้เมธอดที่คุ้นเคยได้ เช่น fillRect, arc, bezierCurveTo เป็นต้น
กรณีการใช้งาน
CSS Paint API รองรับการสร้างสิ่งต่อไปนี้:
- พื้นหลังรูปทรงเรขาคณิตที่ซับซ้อนโดยไม่ใช้ SVG
- พื้นหลังที่ใช้ข้อมูลแบบเปลี่ยนแปลงได้ เช่น แถบความคืบหน้าและกราฟกิจกรรม
- เอฟเฟกต์ระลอกบนปุ่มที่ขับเคลื่อนด้วยคุณสมบัติแบบกำหนดเอง
- เอฟเฟกต์เส้นขอบที่ซับซ้อน เช่น เส้นประและลายขัด
- เส้นแบ่งแบบคลื่นและรูปทรงธรรมชาติ
ประสิทธิภาพของเวิร์กเล็ตการวาด
เวิร์กเล็ตการวาดทำงานนอกเธรดหลัก (ในบริบทเวิร์กเล็ตแยกต่างหาก) และวาดใหม่เฉพาะเมื่อคุณสมบัติแบบกำหนดเองของ CSS เปลี่ยนแปลงเท่านั้น วิธีนี้มีประสิทธิภาพมากกว่าการวาดด้วย Canvas ซึ่งทำงานบนเธรดหลัก
การรองรับของเบราว์เซอร์
CSS Paint API รองรับใน Chrome 65 ขึ้นไปและ Edge 79 ขึ้นไป ส่วน Firefox และ Safari ยังไม่รองรับ ณ ปี 2024 ควรใช้เป็นการเพิ่มความสามารถแบบค่อยเป็นค่อยไป
@supports สำหรับการลดระดับอย่างราบรื่น
ควรจัดเตรียมทางเลือกสำรองไว้เสมอ และใช้ @supports เพื่อใช้เวิร์กเล็ตการวาดเฉพาะเมื่อมีการรองรับเท่านั้น:
<div class="element"></div>
ตรวจสอบความเข้าใจ
คลาส CSS Paint Worklet ต้องใช้เมธอดใดเพื่อดำเนินการวาด
สรุปทบทวน
CSS Paint API ช่วยให้เวิร์กเล็ต JavaScript สร้างภาพ CSS ด้วยโปรแกรมได้ ให้เขียนคลาสที่มีเมธอด paint() ลงทะเบียนด้วย registerPaint() โหลดด้วย CSS.paintWorklet.addModule() และใช้งานเป็น background: paint(name) ตัววาดสามารถอ่านคุณสมบัติแบบกำหนดเองของ CSS เพื่อสร้างภาพที่ขับเคลื่อนด้วยข้อมูล ควรจัดเตรียมทางเลือกสำรองด้วย @supports
คำถามที่พบบ่อย
บทเรียน “CSS Paint API: เวิร์กเล็ต” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “CSS Paint API: เวิร์กเล็ต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “CSS Paint API: เวิร์กเล็ต”
สร้างภาพพื้นหลังและเส้นขอบ CSS แบบกำหนดเองด้วยโปรแกรม โดยใช้ Paint Worklets คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “CSS Paint API: เวิร์กเล็ต” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- CSS Typed Object Model (OM)
- API คุณสมบัติและค่าของ CSS (@property)
- CSS Paint API: เวิร์กเล็ต
- CSS Layout API และขอบเขต