Canvas createRadialGradient() metode
Definition og brug
createLinearGradient() metode til at oprette et stråleformet/cirkulært gradvis farveovergangsobjekt.
Gradvis farveovergang kan bruges til at fylde rektangler, cirkler, linjer, tekst osv.
Tip:Brug dette objekt som strokeStyle eller fillStyle egenskabens værdi.
Tip:Brug addColorStop() Metoden definerer forskellige farver og hvor farverne skal placeres i gradient-objektet.
Eksempel
Tegn et rektangel og fyld det med en stråleformet/cirkulær gradvis farveovergang:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"rød");
grd.addColorStop(1,"hvid");
// Fyld med gradvis farveovergang
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Syntaks
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Parameterværdi
| Parameter | Beskrivelse |
|---|---|
| x0 | Startcirkelens x-koordinat for den gradvise farveovergang. |
| y0 | Startcirkelens y-koordinat for den gradvise farveovergang. |
| r0 | Startcirkelens radius. |
| x1 | Slutcirkelens x-koordinat for den gradvise farveovergang. |
| y1 | Slutcirkelens y-koordinat for den gradvise farveovergang. |
| r1 | Slutcirkelens radius. |
Browserunderstøttelse
Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.
