[HTML5, Canvas] Kreis zeichnen

Drucken
( 2 Votes )
Hauptkategorie: Programmieren Kategorie: HTML5
Erstellt am 11.04.2013 Zuletzt aktualisiert am 12.04.2013 Geschrieben von Jonny132
Um in HTML5 zeichen zu können, benötigen wir immer ein Canvas-Objekt auf welches wir einen Kreis zeichnen können. Mittels JavaScript kann dann der Kreis gezeichnet werden.
  
Kreis in ein Canvas-Objekt zeichnen:
<canvas id="meinKreisCanvas" width="300" height="300">
</canvas>
<script>

var e=document.getElementById("meinKreisCanvas");
var canv=e.getContext("2d");
canv.fillStyle= "green";
canv.arc(150,150,100,0,2*Math.PI);
canv.fill();

</script> 
Kreis in Canvas
 
Zuerst wird das Canvas mit der ID 'meinKreisCanvas' erstellt.
Dieses Element wird mittels der Funktion getElementById() in eine Variable geschrieben und kann somit angesprochen werden.
    
Da wir den Context des Canvas benötigen um darauf zeichnen zu können, benutzen wir die getContext()-Funktion.
 
Im Context können wir num verschiedene Eigenschaften setzen. In unserem Beispiel, wurde z.B. der Style des zu malenden Kreises auf Grün gesetzt.

Die Funktion arc():
  
Die Funktion arc() wird zum zeichnen von Kreisen bzw auch zum zeichnen von Halbkreisen oder auch Kurven verwendet. Sie nimmt 5 Parameter entgegen.
1. Parameter: Die X-Koordinate des Kreismittelpunktes
2. Parameter: Die Y-Koordinate des Kreismittelpunktes
3. Parameter: Der Radius des Kreises (Die hälfte des gesamten Durchmessers)
4. Parameter: Der Startwert von wo der Kreis aus gezeichnet werden soll. Dies wird mittels der Zahl PI berechnet. 0 entspricht hierbei der Punkt Links in der Mitte des Kreises. PI wäre der Punkt rechts in der Mitte des Kreises.
5. Parameter: Der Endwert bis wohin der Kreis gezeichnet werden soll.

Damit wir also einen Vollständigen Kreis bekommen, können wir dem 4. Parameter eine 0 übergeben und dem 5. Parameter der zweifache Wert von PI (würde man nur den einfachen Wert von PI übergeben, hätten wir einen Halbkreis)

Zu guter letzt wird noch die fill()-Funktion des Contexts aufgerufen welche dann Schlussendlich den Kreis zeichenet.


    Veröffentlichen Sie ihre Kommentare ...