HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 193

Die Funktion .beginPath() läutet einen neuen Pfad ein. Mit .moveTo() verschieben
Sie den Ursprungspunkt im Koordinatensystem an die entsprechende Position, mit
.lineTo() zeichnen Sie eine gerade Linie vom Ursprungspunkt zu den angegebenen
Koordinaten. Damit Ihre Linie im zuvor festgelegten Stil gezeichnet wird, rufen Sie
die Methode canvas.stroke() auf. Sie haben nun eine 10 Pixel dicke diagonale Linie
gezeichnet (Abbildung 4.50).

4

Abbildung 4.50 Eine einfache Linie

Auch komplexere Formen sind möglich:

canvas.fillStyle = "#f00";
canvas.strokeStyle = "#000";
canvas.lineWidth = 5;

canvas.beginPath();
canvas.moveTo(50, 50);
canvas.bezierCurveTo(50,250,250,50,250,250);
canvas.lineTo(50, 250);
canvas.lineTo(50, 50);

canvas.stroke();
canvas.fill();

Mit der Funktion .bezierCurveTo() beschreiben Sie eine quadratische Bézierkurve .
Führen Sie den Pfad anschließend mit .lineTo() zurück zum Ausgangspunkt, um
eine geschlossene Form zu erhalten. Die Funktion .stroke() zeichnet die Linie,
.fill() füllt die Form mit der zuvor definierten Farbe (Abbildung 4.51).