JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 435

1. Zuerst müssen Sie einen Pfad erstellen. Dazu verwendet man die Methode beginPath() .
Intern wird ein Pfad als eine Liste von Unterpfaden (Linien, Winkelausschnitte etc.) ver-
waltet, die als gemeinsame Form benutzt werden kann. Jeder Aufruf der Methode setzt
diese interne Liste zurück und Sie können eine neue Form zeichnen.
2. Sie sollten als erste Anweisung moveTo() aufrufen, um die Position des Pfads explizit an -
zugeben, obwohl die erste Anweisung zum Erstellen eines Pfads im Grunde auch implizit
auslöst.
3. In der Folge erstellen Sie die einzelnen Abschnitte des Pfads durch die verschiedenen
Zeichenmethoden.
4. Danach sollten Sie in der Regel mit closePath() den Pfad schließen. Diese Anweisung
versucht eine Form vom letzten Punkt zum Startpunkt zu schließen.
5. Zum Abschluss werden Sie die erzeugte Form mit einem Rahmen versehen und/oder
füllen. Dabei wird ein Füllen einer Form eine eventuell noch nicht mit closePath()
geschlossene Form automatisch schließen. Wenn Sie die Form ofen lassen wollen (bei
einer Form, die nur aus eine Linie besteht), unterbleibt closePath() .
Ein Beispiel mit Pfaden
Das alles sehen wir jetzt in einem Beispiel (kap14_20.js):
Listing 14.49■ Diverse Pfade
window.onload = function() {
var zb = document.getElementById('cv1').getContext('2d');
with (zb) {
// Ein einfaches Polygon - geschlossen und gefüllt
illStyle = "rgba(0, 20, 200, 0.4)";
beginPath();
moveTo(20, 20);
lineTo(100, 100);
lineTo(320, 10);
lineTo(110, 180);
closePath();
ill();
// Kreissegment - geschlossen und gefüllt
illStyle = "rgba(0, 250, 10, 0.4)";
beginPath();
moveTo(200, 300);
arc(200, 250, 150, 1.5, 5.3, false);
closePath();
ill();
// Zwei offene verbundene Linien
strokeStyle = "rgba(0, 50, 255, 0.7)";
lineWidth = 10;
beginPath();
moveTo(400, 450);
lineTo(10, 10);
lineWidth = 10;
lineTo(500, 100);
stroke();
// eine quadratische Bézierkurve - offen
strokeStyle = "rgba(255, 50, 10, 0.4)";
lineWidth = 10;
beginPath();