HTML canvas createLinearGradient() metode
Definition og brug
createLinearGradient() metoden opretter en lineær gradientobjekt.
Gradiente kan bruges til at fylde rektangler, cirkler, linjer, tekst og meget mere.
Vedligeholdelse:Brug dette objekt som strokeStyle eller fillStyle egenskabens værdi.
Vedligeholdelse:Brug addColorStop() Metoden definerer forskellige farver og hvor farverne skal placeres i gradient-objektet.
Eksempel
Se også:
Definer en gradient fra sort til hvid (fra venstre til højre) som fyllingsstil for rektanglen:
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);
Syntaks
context.createLinearGradient(x0,y0,x1,y1);
Parameterværdi
| Parameter | Beskrivelse |
|---|---|
| x0 | X-koordinaten for startpunktet af gradienten |
| y0 | Y-koordinaten for startpunktet af gradienten |
| x1 | X-koordinaten for afslutningen af gradienten |
| y1 | Y-koordinaten for afslutningen af gradienten |
Flere eksempler
Eksempel 2
Definer en gradient (fra øverst til nederst) som fyllingsstil for rektanglen:
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);
Eksempel 3
Definer en gradient fra sort til rød og derefter hvid som fyllingsstil for rektanglen:
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);
Browserunderstøttelse
Talene i tabellen 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.
