บทความบทนำของ wulin.com (www.vevb.com): แอปพลิเคชันของ HTML5 การฝึกอบรมรายวันแท็ก Canvas Tag - การวาดกราฟิกการไล่ระดับสีรัศมี
เราเรียนรู้วิธีการวาดกราฟการไล่ระดับสีเชิงเส้นโดยใช้ผืนผ้าใบและวันนี้เราจะได้เรียนรู้วิธีการวาดกราฟเรเดียลการไล่ระดับสี จากการศึกษาระดับก่อนหน้านี้เรารู้ว่าการวาดกราฟการไล่ระดับสีเชิงเส้นใช้ฟังก์ชั่นที่สำคัญมาก - createLineargradiend ();
หากเราต้องการวาดเรเดียลไล่ระดับสีเรามีวิธีที่คล้ายกันดังนี้:
XSTART: แกนแนวนอนของจุดเริ่มต้นการไล่ระดับสี
YSTART: พิกัดแนวตั้งของจุดเริ่มต้นการไล่ระดับสี
Xend: แกนแนวแนวนอน
Yend: พิกัดแนวตั้งของจุดสิ้นสุดการไล่ระดับสี
RADIUSSTART: รัศมีของวงกลมที่เริ่มเปลี่ยน
Radiusend: รัศมีของวงกลมที่ลงท้ายด้วยการไล่ระดับสี
ในที่สุดเราสามารถวาดการไล่ระดับสีที่สวยงามมากผ่านวิธี addColorStop ที่เราเรียนรู้ในชั้นเรียนสุดท้าย นอกจากนี้ยังต้องตั้งค่าจุดลอยตัวระหว่าง 0-1 เป็นออฟเซ็ตของจุดเปลี่ยนการไล่ระดับสี
กรณีรหัสทั้งหมดเป็นเช่นเดียวกับในคลาสก่อนหน้ายกเว้น: