CanvasRenderingContext2D: roundRect()-Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2023 browserübergreifend verfügbar.
Die Methode CanvasRenderingContext2D.roundRect() der Canvas-2D-API fügt dem aktuellen Pfad ein abgerundetes Rechteck hinzu.
Die Radien der Ecken können ähnlich wie bei der CSS-Eigenschaft border-radius angegeben werden.
Wie andere Methoden, die den aktuellen Pfad verändern, zeichnet diese Methode selbst nichts. Um das abgerundete Rechteck auf einem Canvas zu zeichnen, können Sie die Methoden fill() oder stroke() verwenden.
Syntax
roundRect(x, y, width, height, radii)
Parameter
x-
Die x-Koordinate des Startpunkts des Rechtecks in Pixeln.
y-
Die y-Koordinate des Startpunkts des Rechtecks in Pixeln.
width-
Die Breite des Rechtecks. Positive Werte erstrecken sich nach rechts, negative nach links.
height-
Die Höhe des Rechtecks. Positive Werte erstrecken sich nach unten, negative nach oben.
radii-
Eine Zahl oder Liste, die die Radien der Kreisbögen für die Ecken des Rechtecks angibt. Anzahl und Reihenfolge der Radien entsprechen bei positiven Werten für
widthundheightdenen der CSS-Eigenschaftborder-radius: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. Die Radiuswerte, die normalerweise für die linken Ecken gelten, werden dann für die rechten verwendet und umgekehrt. Entsprechend wird das abgerundete Rechteck bei einem negativen Wert fürheightvertikal gespiegelt. Die angegebenen Radien können verkleinert werden, wenn eine Kante kürzer ist als die Summe der Radien ihrer beiden Ecken.Der Parameter
radiikann auch eine Instanz vonDOMPointoderDOMPointReadOnlysein, ein Objekt mit denselben Eigenschaften ({x: 0, y: 0}), eine Liste solcher Objekte oder eine Liste, die Zahlen und solche Objekte kombiniert.
Rückgabewert
Keiner (undefined).
Ausnahmen
RangeError-
Wenn
radiieine Liste mit keinem oder mehr als vier Elementen ist oder einer der Werte eine negative Zahl ist.
Beispiele
Rechtecke zeichnen
Dieses Beispiel erstellt mit der Methode roundRect() mehrere Pfade für abgerundete Rechtecke. Anschließend werden die Pfade mit der Methode stroke() gezeichnet.
HTML
<canvas id="canvas" width="700" height="300"></canvas>
JavaScript
Zunächst erstellen wir einen Kontext zum Zeichnen der abgerundeten Rechtecke.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
Der folgende Code zeichnet zwei Rechtecke, die beide am Punkt (10, 20) beginnen und eine Breite von 150 sowie eine Höhe von 100 haben. Das erste Rechteck wird rot gezeichnet. Für alle Ecken wird mit einer Zahl als Argument ein Radius von null angegeben. Das zweite wird blau gezeichnet. Für alle Ecken wird ein Radius von 40 Pixeln als einzelnes Element einer Liste angegeben.
// 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();
Unter dem vorherigen Rechteck zeichnen wir ein weiteres in Orange, für das die Radien gegenüberliegender Ecken angegeben werden.
// 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, für die jeweils vier Radiuswerte angegeben werden und die denselben Startpunkt haben. Der Unterschied besteht darin, 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 ist unten zu sehen. Beachten Sie bei den beiden Rechtecken rechts, dass das untere mit einer negativen Breite gezeichnet wird und dadurch horizontal gespiegelt ist.
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-context-2d-roundrect |
Browser-Kompatibilität
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.rect()CanvasRenderingContext2D.fillRectCanvasRenderingContext2D.strokeRect()CanvasRenderingContext2D.fill()CanvasRenderingContext2D.stroke()