Canvas fillStyle-eigenschap

Canvas reference manual

Definitie en gebruik

fillStyle Instellen of retourneren van de kleur, verloop of patroon die wordt gebruikt om te schilderen.

Voorbeeld

Voorbeeld 1

Definieer een rechthoek gevuld met blauw:

Uw browser ondersteunt de canvas tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

Probeer het zelf uit

Tip:Meer voorbeelden zijn beschikbaar aan de onderkant van de pagina.

Syntaxis

context.fillStyle=color|gradient|pattern;

Eigenschapswaarde

Waarde Beschrijving
color Geef de tekeningsvullingskleur aan CSS-kleurenwaarde). Standaardwaarde is #000000.
gradient Gradient-object voor het vullen van tekeningen (LineairOfRadioactief)
pattern Pattern-object voor het vullen van tekeningen.

Technische details

Standaardwaarde: #000000

Meer voorbeelden

Voorbeeld 2

Definieer een verticale overgang als vullingsstijl voor het rechthoekige object:

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 horizontale overgang als vullingsstijl voor het rechthoekige object:

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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Probeer het zelf uit

Voorbeeld 4

Definieer een overgang van zwart naar rood naar wit als vullingsstijl voor het rechthoekige object:

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

Voorbeeld 5

Gebruikte afbeelding:

lamp

Gebruik een afbeelding om de tekening te vullen:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

Probeer het zelf uit

Browserondersteuning

De cijfers in de tabel vermelden de versie van de browser die de eerste volledige ondersteuning biedt voor deze eigenschap.

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