ผ้าใบ - การไล่ระดับสี
การไล่ระดับสีสามารถนำมาใช้ในการกรอกข้อมูลสี่เหลี่ยมวงกลมเส้นข้อความ ฯลฯ รูปร่างบนผืนผ้าใบไม่ จำกัด สีทึบ
มีสองประเภทที่แตกต่างกันของการไล่ระดับสีคือ:
- createLinearGradient ( x,y,x1,y1 ) - สร้างลาดเชิงเส้น
- createRadialGradient ( x,y,r,x1,y1,r1 ) - สร้างรัศมี / ลาดวงกลม
เมื่อเรามีการไล่ระดับสีของวัตถุที่เราต้องเพิ่มสองคนหรือมากกว่าหยุดสี
addColorStop() วิธีการระบุหยุดสีและตำแหน่งของตนพร้อมการไล่ระดับสี ตำแหน่งการไล่โทนสีได้ทุกที่ระหว่าง 0-1
ที่จะใช้การไล่ระดับสีตั้งค่าสไตล์การเติมสีหรือ strokeStyle คุณสมบัติการไล่ระดับสีแล้ววาดรูปร่าง (rectangle, text, or a line)
ใช้ createLinearGradient()
ตัวอย่าง
สร้างลาดเชิงเส้น เติมรูปสี่เหลี่ยมผืนผ้าที่มีการไล่ระดับสี:
javascript:
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() :
ตัวอย่าง
สร้างรัศมี / ลาดวงกลม เติมรูปสี่เหลี่ยมผืนผ้าที่มีการไล่ระดับสี:
javascript:
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); ลองตัวเอง»