HTML canvas createLinearGradient() Method
Tukuyin at Paggamit
createLinearGradient() Ang paraan ay gumawa ng linear gradient object.
Ang gradient ay maaaring gamitin para mapunan ang parihaba, bilog, linya, teksto, at iba pa.
Mga payo:Gumamit ng objekto bilang strokeStyle o fillStyle halaga ng atributo.
Mga payo:Gumamit ng addColorStop() Ang paraan ay nagtutukoy ng iba't ibang mga kulay, at saan nasa gradient object ang pagkalagay ng kulay.
Mga Halimbawa
Mga ibang panghinala:
Tukuyin ang isang pagkalipat mula sa kulay itim hanggang sa kulay puti (mula kaliwa hanggang kanan), bilang patambalang larawan ng parihaba:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Pagsasalin
context.createLinearGradient(x0,y0,x1,y1);
Halaga ng Parametro
| Parametro | Paglalarawan |
|---|---|
| x0 | Ang x-coordinate ng pook ng pagsisimula ng pagkalipat |
| y0 | Ang y-coordinate ng pook ng pagsisimula ng pagkalipat |
| x1 | Ang x-coordinate ng pook ng pagtatapos ng pagkalipat |
| y1 | Ang y-coordinate ng pook ng pagtatapos ng pagkalipat |
Mga Halimbawa higit pa
Mga Halimbawa 2
Tukuyin ang isang pagkalipat (mula itaas hanggang sa ibaba) bilang patambalang larawan ng parihaba:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Mga Halimbawa 3
Tukuyin ang isang pagkalipat mula sa kulay itim hanggang sa kulay pulang puti, bilang patambalang larawan ng parihaba:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
การสนับสนุนโดยบราวเซอร์
ตัวเลขในตารางนี้ระบุว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นต่อไปของมันไม่สนับสนุนสมรรถนะ <canvas>
