CanvasRenderingContext2D: ellipse()-Methode

Syntax

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)

Die ellipse()-Methode erstellt einen elliptischen Bogen, der bei (x, y) zentriert ist, mit den Radien radiusX und radiusY. Der Pfad beginnt bei startAngle und endet bei endAngle und verläuft in der durch counterclockwise angegebenen Richtung (standardmäßig im Uhrzeigersinn).

Parameter

x

Die x-Achse (horizontale) Koordinate des Zentrums der Ellipse.

y

Die y-Achse (vertikale) Koordinate des Zentrums der Ellipse.

radiusX

Der Hauptachsenradius der Ellipse. Muss nicht-negativ sein.

radiusY

Der Nebenachsenradius der Ellipse. Muss nicht-negativ sein.

rotation

Die Drehung der Ellipse, ausgedrückt in Bogenmaß.

startAngle

Der exzentrische Winkel, bei dem die Ellipse beginnt, im Uhrzeigersinn vom positiven x-Achse gemessen und in Bogenmaß ausgedrückt.

endAngle

Der exzentrische Winkel, bei dem die Ellipse endet, im Uhrzeigersinn vom positiven x-Achse gemessen und in Bogenmaß ausgedrückt.

counterclockwise Optional

Ein optionaler boolescher Wert, der, wenn er true ist, die Ellipse gegen den Uhrzeigersinn zeichnet. Der Standardwert ist false (im Uhrzeigersinn).

Rückgabewert

Keiner (undefined).

Beispiele

Zeichnen einer vollständigen Ellipse

Dieses Beispiel zeichnet eine Ellipse in einem Winkel von π/4 Bogenmaß (45°). Um eine vollständige Ellipse zu erstellen, beginnt der Bogen bei einem Winkel von 0 Bogenmaß (0°) und endet bei einem Winkel von 2π Bogenmaß (360°).

HTML

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

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

// Draw the ellipse
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();

// Draw the ellipse's line of reflection
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();

Ergebnis

Verschiedene elliptische Bögen

Dieses Beispiel erstellt drei elliptische Pfade mit unterschiedlichen Eigenschaften.

HTML

<canvas id="canvas"></canvas>

JavaScript

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

ctx.fillStyle = "red";
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI * 0.25, 0, Math.PI * 1.5);
ctx.fill();

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI * 0.25, 0, Math.PI);
ctx.fill();

ctx.fillStyle = "green";
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI * 0.25, 0, Math.PI, true);
ctx.fill();

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle, die diese Methode definiert: CanvasRenderingContext2D
• Verwenden Sie CanvasRenderingContext2D.arc(), um einen kreisförmigen Bogen zu zeichnen