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
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
Rückgabewert
Keiner (undefined
).
Beispiele
Ein einfaches gefülltes Rechteck
Dieses Beispiel zeichnet ein gefülltes grünes Rechteck mit der fillRect()
-Methode.
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.
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.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
Spezifikationen
Specification |
---|
HTML Standard # dom-context-2d-fillrect-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.fillStyle
CanvasRenderingContext2D.clearRect()
CanvasRenderingContext2D.strokeRect()