Mga paraan ng Canvas addColorStop()
Mag-definir at gamit
addColorStop() Ang method ay nagtutukoy sa kulay at posisyon sa gradient object.
Ang addColorStop() method ay may kaugnayan sa createLinearGradient() o createRadialGradient() Magpakita ng magkasamang gamit.
注释：Maaari mong tumawag sa addColorStop() method upang baguhin ang gradwasyon. Kung hindi mo gagamitin ang gradient object, ang gradwasyon ay hindi makikita. Upang makita ang gradwasyon, kailangan mong lumikha ng hindi bababa sa isang stop na kulay.
Mga halimbawa
Mga halimbawa 1
Mag-definir ng isang gradwasyon na mula sa black hanggang white bilang patnugot ng kulay ng silid:
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);
Mga tip:Higit pang mga halimbawa ay inilalagay sa ibaba ng pahina.
Mga sintaksis
gradient.addColorStop(stop,kulay);
Halaga ng parameter
| Parameter | Paglalarawan |
|---|---|
| stop | Ang halaga na nasa pagitan ng 0.0 at 1.0, na naglalarawan ng posisyon sa pagitan ng simula at katapusan ng gradwasyon. |
| kulay | Ang CSS na halaga ng kulay na ipapakita sa katapusan. |
Higit pang mga halimbawa
Mga halimbawa 2
Mag-definir ng gradwasyon sa pamamagitan ng maraming paraan ng addColorStop():
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("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Suporta ng Browser
Ang mga numero sa talahanayan ay nagtutukoy sa unang bersiyon ng browser na ganap na sumusuporta sa katangian na ito.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
