CanvasRenderingContext2D: roundRect()-Methode

x

Die x-Achsen-Koordinate des Startpunkts des Rechtecks in Pixeln.

y

Die y-Achsen-Koordinate des Startpunkts des Rechtecks in Pixeln.

width

Die Breite des Rechtecks. Positive Werte sind nach rechts und negative nach links.

height

Die Höhe des Rechtecks. Positive Werte sind nach unten und negative nach oben.

radii

Eine Zahl oder Liste, die die Radien des kreisförmigen Bogens angibt, der für die Ecken des Rechtecks verwendet wird. Die Anzahl und Reihenfolge der Radien funktionieren auf die gleiche Weise wie die CSS-Eigenschaft border-radius, wenn width und height positiv 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 width negativ, wird das abgerundete Rechteck horizontal gespiegelt, sodass die Radiuswerte, die normalerweise für die linken Ecken gelten, auf der rechten Seite verwendet werden und umgekehrt. Ähnlich verhält es sich, wenn height negativ ist, das abgerundete Rechteck wird dann vertikal gespiegelt. Die angegebenen Radien können skaliert (reduziert) werden, wenn eine der Seiten kürzer ist als der kombinierte Radius der Eckpunkte an beiden Enden.

Der radii-Parameter kann auch eine DOMPoint oder DOMPointReadOnly-Instanz sein, oder ein Objekt, das die gleichen Eigenschaften enthält ({x: 0, y: 0}), oder eine Liste solcher Objekte, oder eine Liste, die Zahlen und solche Objekte mischt.

Keiner (undefined).

RangeError

Wenn radii eine Liste ist, die null oder mehr als vier Elemente hat, oder wenn einer ihrer Werte eine negative Zahl ist.

Dieses Beispiel erstellt eine Anzahl von abgerundeten rechteckigen Pfaden mit 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 zum Zeichnen unserer abgerundeten Rechtecke.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

Der untenstehende Code zeichnet zwei Rechtecke, die beide vom Punkt (10, 20) ausgehen und eine Breite von 150 und eine Höhe von 100 haben. Das erste Rechteck wird in Rot gezeichnet und gibt einen Null-Radius für alle Ecken unter Verwendung einer Zahl als Argument an. Das zweite wird in Blau gezeichnet und gibt einen 40px Radius als ein 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();

Unter dem vorhergehenden Rechteck zeichnen wir ein weiteres in Orange, das die Werte der Radien gegenüberliegender Ecken spezifiziert.

// 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 ist 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.

• Die Schnittstelle, die diese Methode definiert: CanvasRenderingContext2D
• CanvasRenderingContext2D.rect()
• CanvasRenderingContext2D.fillRect
• CanvasRenderingContext2D.strokeRect()
• CanvasRenderingContext2D.fill()
• CanvasRenderingContext2D.stroke()