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