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 # dom-context-2d-rect-dev |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rect |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.fillRect
CanvasRenderingContext2D.strokeRect()
CanvasRenderingContext2D.fill()
CanvasRenderingContext2D.stroke()