CanvasRenderingContext2D: fillRect()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.fillRect() Methode der Canvas 2D API zeichnet ein Rechteck, das entsprechend dem aktuellen fillStyle gefüllt ist.

Diese Methode zeichnet direkt auf die Leinwand, ohne den aktuellen Pfad zu verändern, daher haben nachfolgende Aufrufe von fill() oder stroke() keinen Einfluss darauf.

Syntax

js
fillRect(x, y, width, height)

Die fillRect()-Methode zeichnet ein gefülltes Rechteck, dessen Startpunkt bei (x, y) liegt und dessen Größe durch width und height festgelegt wird. Der Füllstil wird durch das aktuelle fillStyle- Attribut bestimmt.

Parameter

x

Die x-Achsen-Koordinate des Startpunkts des Rechtecks.

y

Die y-Achsen-Koordinate des Startpunkts des Rechtecks.

width

Die Breite des Rechtecks. Positive Werte sind nach rechts, negative nach links.

height

Die Höhe des Rechtecks. Positive Werte sind nach unten, negative nach oben.

Rückgabewert

Keiner (undefined).

Beispiele

Ein einfaches gefülltes Rechteck

Dieses Beispiel zeichnet ein gefülltes grünes Rechteck mit der fillRect()-Methode.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

Die obere linke Ecke des Rechtecks befindet sich bei (20, 10). Es hat eine Breite von 150 und eine Höhe von 100.

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);

Ergebnis

Das gesamte Canvas füllen

Dieses Code-Snippet füllt die gesamte Leinwand mit einem Rechteck. Dies ist oft nützlich, um einen Hintergrund zu erstellen, auf den andere Dinge gezeichnet werden können. Um dies zu erreichen, werden die Dimensionen des Rechtecks so eingestellt, dass sie den width- und height-Attributen des <canvas>-Elements entsprechen.

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);

Spezifikationen

Specification
HTML
# dom-context-2d-fillrect-dev

Browser-Kompatibilität

Siehe auch