HTML-Canvas-Kreis

Beispiel

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Probieren Sie es selbst aus

Zeichnen Sie einen Kreis

Um einen Kreis auf der Leinwand zu zeichnen, verwenden Sie die folgenden Methoden:

• beginPath() - Beginnen Sie den Pfad
• arc(x,y,r,start,end) - Definieren Sie den Kreis
• stroke() - Zeichnen

arc(x,y,r,start,end) - Erstellen Sie einen Bogen (Kurve).

Um einen Kreis zu erstellen, stellen Sie den Startwinkel auf 0 und den Endwinkel auf 2 * Math.PI ein.

x und y Parameter definieren den Koordinatenpunkt des Zentrums des Kreises.

Der r-Parameter definiert den Radius des Kreises.

Weitere Informationen:

Vollständiges Canvas-Referenzhandbuch von CodeW3C.com