CanvasRenderingContext2D: roundRect() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2023.
Die CanvasRenderingContext2D.roundRect()-Methode der 2D-Canvas-API fügt der aktuellen Pfadkontur ein abgerundetes Rechteck hinzu.
Die Radien der Ecken können auf ähnliche Weise wie die CSS-Eigenschaft border-radius spezifiziert werden.
Wie andere Methoden, die den aktuellen Pfad modifizieren, rendert diese Methode nichts direkt.
Um das abgerundete Rechteck auf eine Leinwand zu zeichnen, können Sie die Methoden fill() oder stroke() verwenden.
Syntax
roundRect(x, y, width, height, radii)
Parameter
x-
Die x-Achsen-Koordinate des Ausgangspunkts des Rechtecks, in Pixeln.
y-
Die y-Achsen-Koordinate des Ausgangspunkts des Rechtecks, in Pixeln.
width-
Die Breite des Rechtecks. Positive Werte gehen nach rechts, und negative nach links.
height-
Die Höhe des Rechtecks. Positive Werte gehen nach unten, und negative nach oben.
radii-
Eine Zahl oder Liste, die die Radien des Kreisbogens für die Ecken des Rechtecks angibt. Die Anzahl und Reihenfolge der Radien funktionieren auf die gleiche Weise wie die CSS-Eigenschaft
border-radiuswennwidthundheightpositiv sind:all-corners[all-corners][top-left-and-bottom-right, top-right-and-bottom-left][top-left, top-right-and-bottom-left, bottom-right][top-left, top-right, bottom-right, bottom-left]
Ist
widthnegativ, wird das abgerundete Rechteck horizontal gespiegelt, sodass die Radiuswerte, die normalerweise für die linken Ecken gelten, rechts verwendet werden und umgekehrt. Ebenso wird bei negativemheightdas abgerundete Rechteck vertikal gespiegelt. Die angegebenen Radien können skaliert (reduziert) werden, wenn eine der Kanten kürzer als der kombinierte Radius der Eckpunkte an beiden Enden ist.Der
radii-Parameter kann auch eineDOMPoint- oderDOMPointReadOnly-Instanz sein oder ein Objekt, das die gleichen Eigenschaften besitzt ({x: 0, y: 0}), oder eine Liste solcher Objekte oder eine Liste, die Zahlen mit solchen Objekten mischt.
Rückgabewert
Keiner (undefined).
Ausnahmen
RangeError-
Wenn
radiieine Liste ist, die null oder mehr als vier Elemente enthält oder wenn einer ihrer Werte eine negative Zahl ist.
Beispiele
Zeichnen von Rechtecken
Dieses Beispiel erstellt eine Reihe von abgerundeten Rechteckpfaden mithilfe der roundRect()-Methode.
Die Pfade werden dann mit der stroke()-Methode gerendert.
HTML
<canvas id="canvas" width="700" height="300"></canvas>
JavaScript
Zuerst erstellen wir einen Kontext für das Zeichnen unserer abgerundeten Rechtecke.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
Der folgende Code zeichnet zwei Rechtecke, beide beginnend vom Punkt (10, 20) mit einer Breite von 150 und einer Höhe von 100. Das erste Rechteck wird in Rot gezeichnet und verwendet eine Null-Radius für alle Ecken mit einer Zahl als Argument. Das zweite wird in Blau gezeichnet und gibt einen Radius von 40px als einzelnes Element in einer Liste an.
// Rounded rectangle with zero radius (specified as a number)
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.roundRect(10, 20, 150, 100, 0);
ctx.stroke();
// Rounded rectangle with 40px radius (single element list)
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.roundRect(10, 20, 150, 100, [40]);
ctx.stroke();
Unterhalb des vorherigen Rechtecks zeichnen wir ein weiteres in Orange, das die Werte der Radien der gegenüberliegenden Ecken angibt.
// Rounded rectangle with 2 different radii
ctx.strokeStyle = "orange";
ctx.beginPath();
ctx.roundRect(10, 150, 150, 100, [10, 40]);
ctx.stroke();
Schließlich zeichnen wir zwei abgerundete Rechtecke, die vier Werte für die Radien und denselben Ausgangspunkt haben. Der Unterschied hier ist, dass das zweite mit einer negativen Breite gezeichnet wird.
// Rounded rectangle with four different radii
ctx.strokeStyle = "green";
ctx.beginPath();
ctx.roundRect(400, 20, 200, 100, [0, 30, 50, 60]);
ctx.stroke();
// Same rectangle drawn backwards
ctx.strokeStyle = "magenta";
ctx.beginPath();
ctx.roundRect(400, 150, -200, 100, [0, 30, 50, 60]);
ctx.stroke();
Ergebnis
Das Ergebnis wird unten gezeigt. Beachten Sie bei den beiden rechten Rechtecken, wie das untere Rechteck mit einer negativen Breite gezeichnet wird und wie dies das Rechteck horizontal spiegelt.
Spezifikationen
| Specification |
|---|
| HTML # dom-context-2d-roundrect |
Browser-Kompatibilität
Loading…
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.rect()CanvasRenderingContext2D.fillRectCanvasRenderingContext2D.strokeRect()CanvasRenderingContext2D.fill()CanvasRenderingContext2D.stroke()