HTML canvas fillRect() Methode

Definition und Verwendung

fillRect() Methode zum Zeichnen eines „gefüllten“ Rechtecks. Die Standardfüllfarbe ist schwarz.

Hinweis:Verwenden Sie fillStyle Eigenschaften, um die Farbe, das Gradienten oder das Muster zu setzen, die für das Füllen des Zeichens verwendet werden.

Beispiel

Zeichnen Sie einen gefüllten Rechteck mit 150*100 Pixeln:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript:

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

Probieren Sie es selbst aus

Syntax

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

Parameterwert

Parameter Beschreibung
x x-Koordinate des linken oberen Ecks des Rechtecks.
y y-Koordinate des linken oberen Ecks des Rechtecks.
width Breite des Rechtecks in Pixeln.
height Höhe des Rechtecks in Pixeln.

Browser-Unterstützung

Die in der Tabelle genannten Zahlen geben die erste Version des Browsers an, die diese Eigenschaft vollständig unterstützt.

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

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen den <canvas>-Element nicht.