HTML canvas createLinearGradient() metod
Definition och användning
createLinearGradient() Metoden skapar ett linjärt gradientobjekt.
Gradationer kan användas för att fylla rektanglar, cirklar, linjer, text och mycket mer.
Tips:Använd detta objekt som strokeStyle eller fillStyle egenskapens värde.
Tips:Använd addColorStop() Metoden specificerar olika färger och var i gradientobjektet färgerna bör placeras.
Exempel
Se också:
Definiera en gradation från svart till vit (från vänster till höger), som fyllstil för rektangeln:
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ärde
| Parameter | Beskrivning |
|---|---|
| x0 | X-koordinaten för gradationens startpunkt |
| y0 | Y-koordinaten för gradationens startpunkt |
| x1 | X-koordinaten för gradationens slutpunkt |
| y1 | Y-koordinaten för gradationens slutpunkt |
Mer exempel
Exempel 2
Definiera en gradation (från övre till nedre kant) som fyllstil för rektangeln:
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);
Exempel 3
Definiera en gradation från svart till röd och sedan vit, som fyllstil för rektangeln:
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);
Webbläsarstöd
Numrerna i tabellen anger den första webbläsarversionen som helt stöder denna egenskap.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.
