Canvas createLinearGradient() methode

Canvas reference manual

Definitie en gebruik

createLinearGradient() De methode maakt een lineair verloopobject aan.

Verlopen kunnen worden gebruikt om rechthoeken, cirkels, lijnen, tekst enz. te vullen.

Tip:Gebruik dit object als strokeStyle of fillStyle waarde 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 verloop van zwart naar wit (van links naar rechts) als vullingsstijl voor het rechthoekje:

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

Probeer het zelf uit

Syntax

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

Parameterwaarde

Parameter Beschrijving
x0 X-coördinaat van het begin van de verloop.
y0 Y-coördinaat van het begin van de verloop.
x1 X-coördinaat van het einde van de verloop.
y1 Y-coördinaat van het einde van de verloop.

Meer voorbeelden

Voorbeeld 2

Definieer een verloop (van boven naar beneden) als vullingsstijl voor het rechthoekje:

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

Probeer het zelf uit

Voorbeeld 3

Definieer een verloop van zwart naar rood naar wit als vullingsstijl voor het rechthoekje:

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

Probeer het zelf uit

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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.

Canvas reference manual