HTML canvas createRadialGradient() -menetelmä
Määritelmä ja käyttö
createLinearGradient() metodilla luodaan säteellinen/kylpylänäköinen gradienttiobjekti.
Gradientti voidaan käyttää täytettäessä矩陣、pyöreitä, viivoja, tekstejä jne.
Vinkki:Käytä tätä objektia strokeStyle tai fillStyle ominaisuuksien arvoja.
Vinkki:Käytä addColorStop() Metodi määrittelee eri värit ja missä gradient-objektissa värit sijaitsevat.
Esimerkki
Piirrä suorakulmio ja täytä se säteellisellä/kylpylänäköisellä väripaletilla:
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");
// Täytä gradientilla
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Syntaksi
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Parametrien arvot
| Parametrit | Kuvaus |
|---|---|
| x0 | Vaihteen aloitettavan ympyrän x-koordinaatti |
| y0 | Vaihteen aloitettavan ympyrän y-koordinaatti |
| r0 | Aloitettavan ympyrän säde |
| x1 | Vaihteen lopetettavan ympyrän x-koordinaatti |
| y1 | Vaihteen lopetettavan ympyrän y-koordinaatti |
| r1 | Lopetettavan ympyrän säde |
Selaimen tuki
Taulukossa olevat numerot mainitsevat ensimmäisen täysin tukevan selaimen version.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> elementtiä.
