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