Pfad-Schnittstelle - arc()
Die Methode arc dient zum Zeichnen von Kreisbögen und Kreisen. Enthält der Arbeitspfad
bereits einen Subpfad, so wird der bisherige Endpunkt mit dem Startpunkt des Kreisbogens verbunden. Der Endpunkt
des Kreisbogens wird ausserdem mit dem Startpunkt des Arbeitspfades zusammengefügt.
Gezeichnet wird der Kreisbogen ausgehend von seinem Mittelpunkt (x, y). An diesen wird der Radius angetragen. Die Länge des Kreisbogens hängt vom Start- und Endwinkel (in rad / Bogenmass) ab, der von der positiven x-Achse aus gemessen wird.
arc
void arc(x, y, radius, startAngle, endAngle, anticlockwise)
Die Methode erwartet fünf Parameter.
Parameter
x - Horizontale Koordinate des Mittelpunkts
y - Vertikale Koordinate des Mittelpunkts
radius - Radius des Kreisbogens
startAngle - Startwinkel in rad, gemessen von der positiven x-Achse
endAngle - Endwinkel in rad, gemessen von der positiven x-Achse
anticlockwise - true = gegen den Uhrzeigersinn, false = mit dem Uhrzeigersinn
Schematische Darstellung
Die folgende Abbildung zeigt, wie die Grössen angetragen werden.
Beispiel
function drawIt(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext('2d');
objContext.beginPath();
// Startposition festlegen (gleich dem Mittelpkt)
objContext.moveTo(60, 60);
// Halbkreis um den Mittelpunkt (60, 60) zeichnen
objContext.arc(60, 60, 30, 0, Math.PI, false);
objContext.closePath();
objContext.fill();
objContext.beginPath();
// Startposition festlegen (ungleich dem Mittelpkt)
objContext.moveTo(150, 10);
// Drittelkreis um den Mittelpunkt (150, 60) zeichnen
objContext.arc(150, 60, 30, Math.PI/8, 7/8*Math.PI, false);
objContext.closePath();
objContext.fill();
}else{
// Sonstiger Code
}
}
Erläuterung
Zu Beginn der Routine wird mit beginPath der Arbeitspfad zurückgesetzt. Danach wird der Startpunkt auf die Koordinaten (60, 60) gesetzt. Diese entsprechen dem Mittelpunkt des Kreises, der anschliessend gezeichnet wird. Dabei handelt es sich um einen Halbkreis mit einem Radius von 30.
Im zweiten Teil der Routine wird ebenfalls ein Teilkreis (Drittelkreis) gezeichnet. Nun unterscheiden sich jedoch der Endpunkt des Arbeitspfades und der Startpunkt des Kreisbogens sowie der Endpunkt des Kreisbogens und der Startpunkt des Arbeitspfades. Deshalb werden die fehlenden Verbindungen durch Geraden geschlossen.
Anzeige
Beispiel 2
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);
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
Das Beispiel soll das Zusammenspiel zwischen Pfaden und Tranformation zeigen.
Als komplexe Form dient der Drittelkreis mit Spitze aus dem vorhergehenden Beispiel. Allerdings wird der Ursprung jetzt zuerst mit Hilfe von translate um 100 Einheiten nach rechts und unten verschoben. Anschliessend wird in einer for-Schleife die Form acht Mal gezeichnet, wobei das Koorinatensystem in jedem Teilschritt um eine 45° (= PI/4) um den Ursprung gedreht wird.