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 Juli 2015.
Die CanvasRenderingContext2D.fillRect()-Methode der Canvas 2D-API zeichnet ein Rechteck, das gemäß dem aktuellen fillStyle gefüllt ist.
Diese Methode zeichnet direkt auf die Leinwand, ohne den aktuellen Pfad zu verändern, sodass nachfolgende fill()- oder stroke()-Aufrufe keinen Effekt darauf haben werden.
Syntax
fillRect(x, y, width, height)
Die fillRect()-Methode zeichnet ein gefülltes Rechteck, dessen Ausgangspunkt bei (x, y) liegt und dessen Größe durch width und height angegeben wird. Der Füllstil wird durch das aktuelle fillStyle-Attribut bestimmt.
Parameter
Rückgabewert
Kein (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
Die gesamte Leinwand füllen
Dieser Codeausschnitt füllt die gesamte Leinwand mit einem Rechteck. Dies ist oft nützlich, um einen Hintergrund zu erstellen, auf dem dann andere Dinge gezeichnet werden können. Um dies zu erreichen, werden die Abmessungen des Rechtecks auf die width- und height-Attribute des <canvas>-Elements gesetzt.
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
Loading…
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.fillStyleCanvasRenderingContext2D.clearRect()CanvasRenderingContext2D.strokeRect()