HTML Canvas Gradients
ผ้าใบ - การไล่ระดับสี
สามารถใช้การไล่ระดับสีเพื่อเติมสี่เหลี่ยม วงกลม เส้น ข้อความ ฯลฯ รูปร่างบนผืนผ้าใบไม่จำกัดเฉพาะสีทึบ
การไล่ระดับสีมีสองประเภท:
- createLinearGradient( x,y,x1,y1 ) - สร้างการไล่ระดับสีเชิงเส้น
- createRadialGradient( x,y,r,x1,y1,r1 ) - สร้างการไล่ระดับสีแนวรัศมี/วงกลม
เมื่อเราได้วัตถุไล่ระดับแล้ว เราต้องเพิ่มจุดสีสองจุดขึ้นไป
addColorStop() วิธีการระบุการหยุดสีและตำแหน่งตามการไล่ระดับสี ตำแหน่งการไล่ระดับสีสามารถอยู่ที่ใดก็ได้ระหว่าง 0 ถึง 1
ในการใช้การไล่ระดับสี ให้ตั้งค่าคุณสมบัติ fillStyle หรือ strokeStyle เป็นการไล่ระดับสี จากนั้นวาดรูปร่าง (สี่เหลี่ยมผืนผ้า ข้อความ หรือเส้น)
ใช้ createLinearGradient()
ตัวอย่าง
สร้างการไล่ระดับสีเชิงเส้น เติมสี่เหลี่ยมด้วยการไล่ระดับสี:
จาวาสคริปต์:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
ใช้ createRadialGradient():
ตัวอย่าง
สร้างการไล่ระดับสีแนวรัศมี/วงกลม เติมสี่เหลี่ยมด้วยการไล่ระดับสี:
จาวาสคริปต์:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);