[HTML5, Canvas] Linie zeichnen

Drucken
( 0 Votes ) 
Hauptkategorie: Programmieren Kategorie: HTML5
Erstellt am 30.01.2013 Zuletzt aktualisiert am 30.01.2013 Geschrieben von Jonny132
Eine einfache Linie mittels JavaScript auf ein Canvas-Objekt zu zeichnen ist garnicht so schwer.
  
Linie in ein Canvas-Objekt zeichnen:
<canvas id="meinLinienCanvas" width="300" height="300">
</canvas>
<script>
var e = document.getElementById("meinLinienCanvas");
var canv = e.getContext("2d");
canv.strokeStyle = "green";
ctx.moveTo(50,50);
ctx.lineTo(250,250);
ctx.stroke();
</script>
Linie in ein Canvas zeichnen

Zuerst wird ein Canvas mit der ID 'meinLinienCanvas' erstellt. Die ID ist wichtig, damit wir später mittels JavaScript und dessen getElementById()-Funktion darauf zugreiffen können.  

Im Context den wir mit der getContext()-Funktion holen, können wir nun auf dessen Eigenschaften zugreiffen.
Im Beispiel wird gezeigt wie ihr die Linie z.B. Grün färben könnt.
Die Startkoordinaten übergeben wir, indem wir die moveTo()-Funktion mit den gewollten Koordinaten aufrufen.
Dann wird mittels lineTo() der Endpunkt der Linie gesetzt.
Abschliessend führen wir die Funktion stroke() aus welche nichts weiter macht, als die Linie zu zeichnen.


Mehrere Linien in ein Canvas einfügen:
<script>
var e=document.getElementById("meinLinienCanvas");
var canv=e.getContext("2d");
canv.strokeStyle = "green";
ctx.moveTo(50,50);
ctx.lineTo(250,250);
ctx.moveTo(50,250);
ctx.lineTo(250,50);
ctx.stroke();
</script>
Mehrere Linien in ein Canvas zeichnen

 
Wie ihr seht müsst ihr dazu nur die zwei Funktionen moveTo() und lineTo() wiederholen um mehrere Linien zeichnen zu können. 


    Veröffentlichen Sie ihre Kommentare ...