Zeichnen Kreise in HTML5-Canvas mit JavaScript

Grafiken sind ein wichtiger Bestandteil jeder Webanwendung. HTML bietet zwei Möglichkeiten, Grafiken zu erstellen, die erste ist canvas und eine andere ist SVG. Im heutigen Beitrag werden wir lernen, wie man Grafiken, insbesondere Kreise (2-dimensional) in HTML mit Canvas und JavaScript erstellt.

Zeichnen von Kreisen mittels Canvas in HTML mit JavaScript

Canvas ist ein von HTML bereitgestelltes Standardelement, das zum Zeichnen von Grafiken in Webanwendungen verwendet wird. Es ist nichts anderes als ein rechteckiger Bereich auf der Seite ohne Rahmen und Inhalt. Benutzer können diesen rechteckigen Bereich verwenden, um Grafiken zu zeichnen.

Im Canvas gerenderte Grafiken unterscheiden sich vom normalen HTML- und CSS-Stil. Die gesamte Leinwand mit allen darin enthaltenen Grafiken wird als einzelnes dom-Element behandelt.

Methoden von canvas in HTML

1. getContext(): Es ist eine eingebaute Methode von canvas, die den Zeichnungskontext auf der Leinwand abhängig vom contextType zurückgibt. Wenn die Kontextkennung nicht unterstützt wird oder bereits gesetzt ist, wird null zurückgegeben. Unterstützte Kontexttypen sind 2d, webgl, webgl2 und bitmaprenderer.
2. beginPath(): Dies ist eine eingebaute Methode von canvas, die den Pfad beginnt oder den bereits bestehenden Pfad zurücksetzt, um die Grafiken zu zeichnen.
3. arc(): Dies ist eine von canvas eingebaute Methode, die verwendet wird, um einen Kreisbogen auf dem aktuellen Pfad basierend auf den Eingabeparametern zu erstellen.
4. fill(): Dies ist eine eingebaute Methode von canvas, die verwendet wird, um den aktuellen Pfad mit der angegebenen Farbe zu füllen. Benutzer können auch die Region wie nonzero und evenodd angeben.
5. stroke(): Dies ist eine von canvas eingebaute Methode, die verwendet wird, um den aktuellen Pfad mit dem angegebenen Strichstil zu umreißen.

Syntax von arc

context.arc(
    $centerX, $centerY, $radius, $startAngle, $endAngle, $counterclockwise);

Parameter

• $centerX: Es ist ein obligatorischer Parameter, der das X oder die horizontale Koordinate/den Mittelpunkt des Kreises angibt.
• $centerY: Es ist ein obligatorischer Parameter, der das Y oder die Scheitelkoordinate/den Mittelpunkt des Kreises angibt.
• $radius: Es ist ein obligatorischer Parameter, der den Radius des Kreises angibt. Das muss positiv sein.
• $startAngle: Es ist ein obligatorischer Parameter, der den Startwinkel eines Bogens in Bogenmaß angibt, gemessen von der positiven x-Achse.
• $endAngle: Es ist ein obligatorischer Parameter, der den Endwinkel eines Bogens im Bogenmaß gemessen von der positiven x-Achse angibt. Zum Beispiel 2 * Math.PI für einen vollen Kreis.
• $counterclockwise: Dies ist ein optionaler Parameter, der einen booleschen Wert angibt, der angibt, wie ein Kreis im oder gegen den Uhrzeigersinn gezeichnet wird. Der Standardwert ist false.

Schritte zum Zeichnen eines Kreises mit JavaScript Canvas

Beispielcode:

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

<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

context.beginPath();
context.fillStyle = '#0077aa';
context.strokeStyle = '#0077aa47';
context.lineWidth = 2;

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
</script> 

Ausgabe: