HTML canvas createLinearGradient() methode

HTML5 Canvas reference manual

Definitie en gebruik

createLinearGradient() De methode maakt een lineaire overgangsobject aan.

Een overgang kan worden gebruikt om rechthoeken, cirkels, lijnen, tekst enz. te vullen.

Tip:Gebruik dit object als strokeStyle of fillStyle waarden van de eigenschap.

Tip:Gebruik addColorStop() De methode bepaalt verschillende kleuren en waar de kleuren zich in het gradient-object bevinden.

Voorbeeld

Zie ook:

Definieer een overgang van zwart naar wit (van links naar rechts), als de invulstijl van het rechthoekige gebied:

Uw browser ondersteunt de HTML5 canvas tag niet.

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

Try it yourself

Syntax

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

Parameterwaarde

Parameter Beschrijving
x0 X-coördinaat van het beginpunt van de overgang
y0 Y-coördinaat van het beginpunt van de overgang
x1 X-coördinaat van het einde van de overgang
y1 Y-coördinaat van het einde van de overgang

Meer voorbeelden

Voorbeeld 2

Definieer een overgang (van boven naar beneden) als de invulstijl van het rechthoekige gebied:

Uw browser ondersteunt de canvas tag niet.

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

Try it yourself

Voorbeeld 3

Definieer een overgang van zwart naar rood en vervolgens naar wit, als de invulstijl van het rechthoekige gebied:

Uw browser ondersteunt de canvas tag niet.

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

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

HTML5 Canvas reference manual