CanvasRenderingContext2D: rect() 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.rect()
Methode der Canvas 2D API fügt dem aktuellen Pfad ein Rechteck hinzu.
Wie andere Methoden, die den aktuellen Pfad modifizieren, rendert diese Methode nicht direkt
etwas. Um das Rechteck auf eine Leinwand zu zeichnen, können Sie die
Methoden fill() oder
stroke() verwenden.
Hinweis: Um sowohl ein Rechteck zu erstellen als auch in einem Schritt zu rendern, verwenden Sie die
Methoden fillRect() oder
strokeRect().
Syntax
rect(x, y, width, height)
Die rect() Methode erstellt einen rechteckigen Pfad, dessen Startpunkt sich bei
(x, y) befindet und dessen Größe durch width und
height angegeben wird.
Parameter
Rückgabewert
Keiner (undefined).
Beispiele
Zeichnen eines Rechtecks
Dieses Beispiel erstellt einen rechteckigen Pfad mit der rect() Methode. Der Pfad
wird dann mit der fill() Methode gerendert.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Ecke des Rechtecks befindet sich bei (10, 20). Es hat eine Breite von 150 und eine Höhe von 100.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // Start a new path
ctx.rect(10, 20, 150, 100); // Add a rectangle to the current path
ctx.fill(); // Render the path
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML Standard # dom-context-2d-rect-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.fillRectCanvasRenderingContext2D.strokeRect()CanvasRenderingContext2D.fill()CanvasRenderingContext2D.stroke()