Canvas createLinearGradient() metod

Canvas referenshandbok

Definering och användning

createLinearGradient() Metoden skapar ett linjärt gradientobjekt.

Gradienter kan användas för att fylla rektanglar, cirklar, linjer, text och mycket mer.

Tips:Använd detta objekt som strokeStyle eller fillStyle egenskapsvärdet.

Tips:Använd addColorStop() Metoden specificerar olika färger och var de ska placeras i gradient-objektet.

Exempel

Se också:

Definiera en gradient från svart till vit (från vänster till höger) som fyllnadsstil för rektangeln:

Din webbläsare stöder inte HTML5 canvas-taggen.

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);

Prova själv

Syntaks

context.createLinearGradient(x0,y0,x1,y1);

Parametervärde

Parameter Beskrivning
x0 X-koordinaten för startpunkten för gradienten.
y0 Y-koordinaten för startpunkten för gradienten.
x1 X-koordinaten för slutpunkten för gradienten.
y1 Y-koordinaten för slutpunkten för gradienten.

Mer exempel

Exempel 2

Definiera en gradient (från övre till nedre) som fyllnadsstil för rektangeln:

Din webbläsare stöder inte canvas-taggen.

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);

Prova själv

Exempel 3

Definiera en gradient från svart till röd och sedan vit som fyllnadsstil för rektangeln:

Din webbläsare stöder inte canvas-taggen.

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);

Prova själv

Webbläsarstöd

Tabellen siffror anger den första webbläsareversion som helt stöder detta 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 äldre versioner stöder inte <canvas>-elementet.

Canvas referenshandbok