Canvas createRadialGradient() -menetelmä
Määrittely ja käyttö
createLinearGradient() Metodi luo säteellisen tai pyöreän aaltosuunnan objektin.
Säteellinen aalto voidaan käyttää täyttämään suorakulmioita, ympyröitä, viivoja, tekstejä jne.
Vinkki:Käytä tätä objektia strokeStyle tai fillStyle Ominaisuuden arvo.
Vinkki:Käytä addColorStop() Metodi määrittelee eri värit ja missä gradient-objektissa värit sijaitsevat.
Esimerkki
Riisuta suorakulmio ja täytä se säteellisellä tai pyöreällä aaltosuunnalla:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"punainen");
grd.addColorStop(1,"valkoinen");
// Täytä säteellisellä tai pyöreällä aaltosuunnalla
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Syntaksi
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Parametrin arvo
| Parametri | Kuvaus |
|---|---|
| x0 | Vaihteen aloitussyklin x-koordinaatti. |
| y0 | Vaihteen aloitussyklin y-koordinaatti. |
| r0 | Aloitussyklin säde. |
| x1 | Vaihteen lopetussyklin x-koordinaatti. |
| y1 | Vaihteen lopetussyklin y-koordinaatti. |
| r1 | Lopetussyklin säde. |
Selaimen tuki
Taulukon numerot merkitsevät ensimmäisen täysin tukevan ominaisuuden selaimen versiota.
| 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ä.
