Canvas fillRect() methode

Canvas reference manual

Definitie en gebruik

fillRect() Gebruik de methode om een 'gevuld' rechthoek te tekenen. De standaard vullende kleur is zwart.

Hint:Tip: fillStyle Gebruik de eigenschappen om de kleur, het gradient of het patroon voor het vullen van de tekening in te stellen.

Voorbeeld

Teken van een gevuld rechthoek van 150*100 pixels:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

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

Probeer het zelf uit

Syntaxis

context.fillRect(x,y,width,height);

Parameterwaarde

Parameter Beschrijving
x De x-coördinaat van de linkerbovenhoek van het rechthoekige object.
y De y-coördinaat van de linkerbovenhoek van het rechthoekige object.
width De breedte van het rechthoekige object, uitgedrukt in pixels.
height The height of the rectangle, in pixels.

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.

Canvas reference manual