HTML canvas createRadialGradient() Metodong
Definasyon at Paggamit
createLinearGradient() Metodo para lumikha ng radyal/round gradient object.
Ang gradient ay maaaring gamitin para sa pagbubuo ng parihaba, bilog, linya, teksto at iba pa.
Mga tip:Gamitin ang object bilang strokeStyle o fillStyle Ang halaga ng propetya.
Mga tip:Gamitin ang addColorStop() Ang mga metoda ay nagtutukoy ng iba't ibang kulay, at saan nasa gradient object ang paglilingkod ng kulay.
Egemplo
Ipagawa ng isang parihaba, at gamitin ang paglalagay ng radyal/round gradient para sa pagbubuo ng kulay:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
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,100);
รูปแบบ
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
ตัวแปรค่า
| ตัวแปร | การอธิบาย |
|---|---|
| x0 | ตำแหน่ง x ของวงกลมที่เริ่มต้นของสีสลับ |
| y0 | ตำแหน่ง y ของวงกลมที่เริ่มต้นของสีสลับ |
| r0 | รัศมีที่เริ่มต้นของวงกลม |
| x1 | ตำแหน่ง x ของวงกลมที่สิ้นสุดของสีสลับ |
| y1 | ตำแหน่ง y ของวงกลมที่สิ้นสุดของสีสลับ |
| r1 | รัศมีที่สิ้นสุดของวงกลม |
การสนับสนุนเบราเซอร์
ตัวเลขในตารางนี้บอกเล่าถึงเวอร์ชั่นของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นที่เก่ากว่าไม่สนับสนุนประกาย <canvas> อิเล็กทรอนิกส์
