HTML5 Canvas: Einsteiger Tutorial Teil 2 - Linien zeichnen

Im letzten Teil dieses Tutorials haben wir uns darum gekümmert, wie man einen Canvas in seine Website einbaut und darauf zugreifen kann. Nun möchten wir mit dem Zeichnen auf dem Canvas beginnen.

Das HTML5 Canvas Tutorial gliedert sich in die folgenden Teile:

• Teil 1: Einführung und Grundlagen
• Teil 2: Linien zeichnen
• Teil 3: Rechtecke und Kreise
• Teil 4: Text auf den Canvas schreiben

Ich empfehle den ersten Teil zu lesen wenn man noch nicht mit den HTML5 Canvas Grundlagen vertraut ist, da die anderen Teile auf das dort beschriebene aufbauen.

Linien

Nachdem wir die Variable "context" haben, können wir mit dem Zeichnen beginnen. Zunächst zeichnen wir eine einfache Linie.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(0, 0);         // Pfad definieren
context.lineTo(100, 100);
context.lineTo(50, 100);
context.stroke();             // Pfad zeichnen

Dafür brauchen wir die Methoden beginPath, moveTo, lineTo und stroke. Zunächst beginnen wir einen neuen Pfad.

Mit moveTo gehen wir dann zu einer bestimmten Position (hier der Punkt 0/0) und mit lineTo ziehen wir eine gedachte Linie zu dem übergebenen Punkt (100/100). Das nächste lineTo zieht die Linie entsprechend weiter.

Dadurch wird allerdings noch nichts gezeichnet, es wird lediglich ein Pfad erstellt, mit dem wir später alles mögliche machen können. Erst mit stroke übergeben wird das Kommando, dass der Pfad als Linie gezeichnet werden soll.

Farbige Linien

Die Linie aus unserem ersten Beispiel ist schwarz, schwarz ist die Standardfarbe. Möchten wir eine Linie in einer anderen Farbe zeichnen, können wir dazu die Eigenschaft strokeStyle setzen.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(0, 0);             // Pfad definieren
context.lineTo(100, 100);
context.lineTo(50, 100);
context.strokeStyle = "#FF0000";  // Style für Linie setzen
context.stroke();                 // Linie zeichnen 

Hier setzen wir strokeStyle auf die Farbe Rot (#FF0000). Wie zu sehen ist, zeichnet die Funktion stroke() immer aufgrund der zuletzt gegebenen Einstellungen. Zu dem Zeitpunkt, zu dem unser Pfad angelegt wurde, stand der strokeStyle schließlich noch nicht fest. Dennoch wird die Linie in rot gezeichnet.

Mit strokeStyle lässt sich noch viel mehr machen, als bloß eine Farbe zu ändern. Beispielsweise lassen sich auch Farb-Gradienten definieren, aber für den Einstieg sollte das Definieren einer Linienfarbe zunächst ausreichen.

Linienbreite verändern

Bis jetzt haben alle unsere Linien die Breite von einem Pixel. Dies ist die Standardgröße.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(0, 0);             // Pfad definieren
context.lineTo(100, 100);
context.lineTo(50, 100);
context.lineWidth = 10;           // Linienbreite anpassen
context.strokeStyle = "#FF0000";  // Style für Linie setzen
context.stroke();                 // Linie zeichnen 

Mit der Eigenschaft lineWidth können wir diese Größe anpassen und zeichnen in diesem Beispiel eine Linie mit einer Breite von 10 Pixeln.

Nächster Schritt: Rechtecke und Kreise zeichnen

Nachdem wir einfache Linien gezeichnet haben, wollen wir uns nun an kompliziertere Objekte wagen. Im dritten Teil dieses Tutorials geht es darum, wie man mit HTML5 Rechtecke und Kreise zeichnet.