Pfad-Schnittstelle - closePath()
Die Methode closePath schliesst den aktuellen Unterpfad und legt in der Pfadliste einen
neuen Subpfad an. Der erste Punkt des neuen Pfades entspricht dabei dem letzten Punkt des geschlossenen
Pfades.
Sind Start- und Enpunkt des aktuellen Unterpfads verschieden, so werden die beiden Punkte beim Schliessen durch eine gerade Linie verbunden.
Mit der Methode moveTo kann zwischen den Pfaden bequem räumlicher Abstand geschaffen werden.
closePath
void closePath()
Die Methode erwartet keine Parameter.
Beispiel
function drawIt(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext('2d');
// Neuen Arbeitspfad anlegen
objContext.beginPath();
// Ersten Unterpfad kosntruieren
objContext.moveTo(10, 10);
objContext.lineTo(100, 10);
objContext.lineTo(100, 50);
objContext.lineTo(10, 50);
objContext.lineTo(10, 10);
// Ersten Unterpfad schliessen
objContext.closePath();
// Zweiten Unterpfad konstruieren
objContext.moveTo(120, 10);
objContext.lineTo(140, 100);
objContext.lineTo(110, 70);
// Zweiten Unterpfad schliessen
// (Verbindung Startpkt->Endpkt automatisch)
objContext.closePath();
objContext.fill();
}else{
// Sonstiger Code
}
}
Erläuterung
Zu Beginn wird ein neuer Arbeitspfad erstellt (beginPath).
Als nächstes wird der erste Unterpfad konstruiert. Es handelt sich hierbei um ein Rechteck. Nachdem es
durch closePath geschlossen wurde, wird ein zweiter Unterpfad konstruiert. Hier wird zunächst
der Startpunkt mit Hilfe der Methode
moveTo
verschoben. Dann wird ein Dreieck gezeichnet, wobei die letzte Linie durch den Aufruf von closePath
ergänzt wird.