Pfade für komplexe Figuren
| Grundbefehle zur Pfaddefinition |
beginPath() // startet die Pfaddefinition
closePath() // beendet die Pfaddefinition, der Pfad steht jetzt zur Verfügung
stroke() // zeichnet den Umriss des Pfades
fill() // füllt den Pfad
| Die Befehle im einzelnen |
"closePath" versucht den Pfad grafisch zu schließen, indem bei komplexen Figuren versucht wird eine gerade Linie vom letzten zum Startpunkt zu ziehen. Wenn dies nicht erwünscht ist, muss der Befehl auch nicht durchgeführt werden.
"stroke" dient dazu den Rand der Figur zu zeichnen, mit "fill" wird die Figur gefüllt.
| Beispiel 1 |
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
"MoveTo" bewegt den Stift an eine bestimmte Position und der nächste Teilpfad startet dann von dort. Deshalb fängt jede Pfaddefinition typischerweise mit diesem Befehl an.
| Beispiel 2 |
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
Beispiel zum moveto-Befehl
| Beispiel 3 |
// Filled triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill(); // closePath ist nicht notwendig
// Stroked triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath(); // hier ist es notwendig um die Figur aktiv zu schließen
ctx.stroke();
Beispiel für closepath