Linien mit Canvas zeichnen
Auch wenn es zunächst etwas erstaunlich klingt, so gehören doch auch Linien zu den komplexen grafischen Objekten, die in einem Canvas-Objekt mit Hilfe der Pfadtechnik gezeichnet werden.
Der Syntax von lineTo ist lineTo(x,y). Wer diese Methode ausführt, wird unter Umständen aber enttäuscht sein, weil nichts zu sehen ist. Das hängt damit zusammen, dass dem System nicht klar ist, von wo eine Linie gezeichnet werden soll. Es ist also zum Zeichnen einer einfachen Linie immer auch die Methode moveTo(x,y) erforderlich, um einen Anfangspunkt zu setzen. So sieht dann der Code zum Zeichnen einer einfachen Linie so aus:
var cx = document.getElementById('canvas').getContext('2d');
//Pfad beginnen
cx.beginPath();
//zu 10,10 gehen
cx.moveTo(10,10);
//bis 200,10 zeichnen
cx.lineTo(200,10);
//Pfad schließen
cx.closePath();
//Linie Zeichnen
cx.stroke();
Ein zweites Beispiel modifiziert die Standardwerte für die Linienattribute lineWidth, lineCap sowie lineJoin und zeichnet vom Endpunkt der ersten Linie senkrecht weiter.
var cx = document.getElementById('canvas').getContext('2d');
cx.beginPath();
//Farbe Rot
cx.strokeStyle="rgb(255, 0, 0)";
//Linienstärke
cx.lineWidth=10;
//Linienenden abgerundet
cx.lineCap="round"
//Linienstoss abgerundet
cx.lineJoin="round"
// zu 60,20 gehen
cx.moveTo(60,20);
//bis 150,20 zeichnen
cx.lineTo(150,20);
//bis 150,60 zeichnen
cx.lineTo(150,60);
//Pfad schließen
cx.closePath();
//Linie Zeichnen
cx.stroke();
Anders als zu vermuten wird aber kein Winkel gezeichnet, denn durch das Schließen des Pfades wird faktisch eine Linie zum Ausgangspunkt gezeichnet. Erst durch das Vertauschen der Reihenfolge der Methoden closePath() und stroke() ergibt sich ein Winkel. das sieht dann so aus:
Zum Abschluss noch eine kleine Spielerei. Mit Hilfe eine for-Schleife werden 50 Linien jeweils vom gleichen Ausgangspunkt zu einem anderen Endpunkt auf der Canvas-Fläche gezeichnet, wobei jeweils eine etwas veränderte Linienfarbe verwendet wird.