CanvasRenderingContext2D: arc()-Methode

Syntax

arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)

Die Methode arc() erstellt einen kreisfrmigen Bogen mit dem Mittelpunkt (x, y) und einem Radius von radius. Der Pfad beginnt bei startAngle, endet bei endAngle und verluft in der durch counterclockwise angegebenen Richtung (standardmig im Uhrzeigersinn).

Parameter

x

Die horizontale Koordinate des Mittelpunktes des Bogens.

y

Die vertikale Koordinate des Mittelpunktes des Bogens.

radius

Der Radius des Bogens. Muss positiv sein.

startAngle

Der Winkel, bei dem der Bogen in Bogenma beginnt, gemessen von der positiven x-Achse.

endAngle

Der Winkel, bei dem der Bogen in Bogenma endet, gemessen von der positiven x-Achse.

counterclockwise Optional

Ein optionaler boolescher Wert. Wenn true, wird der Bogen gegen den Uhrzeigersinn zwischen den Start- und Endwinkeln gezeichnet. Der Standard ist false (im Uhrzeigersinn).

Rckgabewert

Keiner (undefined).

Beispiele

Zeichnen eines vollstndigen Kreises

Dieses Beispiel zeichnet einen vollstndigen Kreis mit der arc()-Methode.

HTML

<canvas></canvas>

JavaScript

Der Bogen erhlt eine x-Koordinate von 100, eine y-Koordinate von 75 und einen Radius von 50. Um einen vollstndigen Kreis zu erstellen, beginnt der Bogen bei einem Winkel von 0 Bogenma (0) und endet bei einem Winkel von 2 Bogenma (360).

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

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Ergebnis

Verschiedene Formen demonstriert

Dieses Beispiel zeichnet verschiedene Formen, um zu zeigen, was mit arc() mglich ist.

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

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

// Draw shapes
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 2; j++) {
    ctx.beginPath();
    let x = 25 + j * 50; // x coordinate
    let y = 25 + i * 50; // y coordinate
    let radius = 20; // Arc radius
    let startAngle = 0; // Starting point on circle
    let endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
    let counterclockwise = i % 2 === 1; // Draw counterclockwise

    ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

Ergebnis

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Das Interface, das diese Methode definiert: CanvasRenderingContext2D
• Verwenden Sie CanvasRenderingContext2D.ellipse(), um einen elliptischen Bogen zu zeichnen.