HTML canvas fillStyle-eigenschap

HTML5 Canvas reference manual

Definitie en gebruik

fillStyle Property stelt in of retourneert de kleur, het verloop of het patroon voor het invullen van de tekening.

Voorbeeld

Voorbeeld 1

Definieer een rechthoek gevuld met blauw:

Uw browser ondersteunt niet de canvas tag.

JavaScript:

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

Try it yourself

Tip:Meer voorbeelden worden aangeboden aan de onderkant van de pagina.

Syntaxis

context.fillStyle=color|gradient|pattern;

Waarde van het eigenschap

Waarde Beschrijving
color Geef de kleur van het invullen van de tekening aan CSS-kleurenwaarde. Standaardwaarde is #000000.
gradient Object voor het invullen van tekeningen (LineairofRadiatisch)
pattern Pattern-object voor het invullen van tekeningen

Technische details

Standaardwaarde: #000000

Meer voorbeelden

Voorbeeld 2

Definieer een verticale verloop als de invulstijl van het rechthoekig gebied:

Uw browser ondersteunt niet de canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"zwart");
my_gradient.addColorStop(1,"wit");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Try it yourself

Voorbeeld 3

Definieer een horizontale verloop als de invulstijl van het rechthoekig gebied:

Uw browser ondersteunt niet de canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"zwart");
my_gradient.addColorStop(1,"wit");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Try it yourself

Voorbeeld 4

Definieer een verloop van zwart naar rood naar wit als de invulstijl van het rechthoekig gebied:

Uw browser ondersteunt niet de canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"zwart");
my_gradient.addColorStop(0.5,"rood");
my_gradient.addColorStop(1,"wit");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Try it yourself

Voorbeeld 5

Gebruikte afbeelding:

lamp

Gebruik afbeeldingen om te vullen tekeningen:

Uw browser ondersteunt niet de HTML5 canvas tag.

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

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