Dokumentation (canvas.quaese.de)
Pfad-Schnittstelle - beginPath()
Die Methode beginPath leert die Liste der Unterpfade im Kontext.
beginPath
void beginPath()
Die Methode erwartet keinen 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');
// Verschiebung
objContext.translate(100, 100);
// Startfarbe
var intRed = 255;
for(var i=0; i<8; i++){
objContext.rotate(Math.PI/4);
// Arbeitspfad zurücksetzen
objContext.beginPath();
// Startposition festlegen (ungleich dem Mittelpkt)
objContext.moveTo(0, 0);
// Drittelkreis um den Mittelpunkt (150, 60) zeichnen
objContext.arc(0, 60, 30, Math.PI/8, 7/8*Math.PI, false);
objContext.closePath();
objContext.fillStyle = "rgb("+(intRed - i*20)+", 0, 0)";
objContext.fill();
}
}else{
// Sonstiger Code
}
}
Erläuterung
Eine komplexe Form (Drittelkreis mit Spitze) wird in einer for-Schleife
wiederholt gedreht und in Rotabstufungen gefüllt gezeichnet. Um die Form transformieren
zu können, ist es in jedem Schleifendurchlauf notwendig, den aktuellen Arbeitspfad zurückzusetzen
(beginPath) und den Pfad erneut zu konstruieren.