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 Juli 2015.
Die CanvasRenderingContext2D.rect() Methode der Canvas 2D API fügt dem aktuellen Pfad ein Rechteck hinzu.
Wie andere Methoden, die den aktuellen Pfad ändern, rendert diese Methode direkt nichts. Um das Rechteck auf eine Leinwand zu zeichnen, können Sie die fill() oder stroke() Methoden verwenden.
Hinweis: Um ein Rechteck in einem Schritt zu erstellen und zu rendern, verwenden Sie die fillRect() oder strokeRect() Methoden.
Syntax
rect(x, y, width, height) Die rect()-Methode erstellt einen rechteckigen Pfad, dessen Startpunkt bei (x, y) liegt 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 Methode rect(). Der Pfad wird dann mit der Methode fill() 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 # dom-context-2d-rect-dev |
Browser-Kompatibilität
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.fillRectCanvasRenderingContext2D.strokeRect()CanvasRenderingContext2D.fill()CanvasRenderingContext2D.stroke()