Pfad-Schnittstelle - arcTo()
Das Verhalten der Methode arcTo hängt von den Parametern und dem letzten Punkt des
Unterpfads ab. Existiert kein Unterpfad, tut die Methode nichts.
Vorausgesetzt, der Punkt (x0, y0) ist der letzte Punkt des Unterpfads. Die Methode zeichnet eine Kombination aus einem Kreisbogen mit dem Radius radius und einer Geraden. Der Kreis berührt zwei Tangenten. Die erste wird durch die Punkte (x0, y0) und (x1, y1) beschrieben, die zweite durch (x1, y1) und (x2, y2). Die Berührpunkte werden als Start- und Endpunkte (sp und ep) bezeichnet.
Die Methode arcTo verbindet den Punkt (x0, y0) mit dem Startpunkt sp und von diesem
ausgehend mit dem Kreibogen bis zum Endpunkt ep.
Die Methode wird derzeit nur von Safari-Browsern korrekt unterstützt.
Mein Dank gilt Dirk Schulze, der mich auf die fehlerhafte Beschreibung der Methode hingewiesen hat.
arcTo
void arcTo(x1, y1, x2, y2, radius)
Die Methode erwartet fünf Parameter.
Parameter
x1 - Horizontale Koordinate Punkt 1
y1 - Vertikale Koordinate Punkt 1
x2 - Horizontale Koordinate Punkt 2
y2 - Vertikale Koordinate Punkt 2
radius - Radius des Kreisbogens
Schematische Darstellung
Die folgende Abbildung zeigt, wie die Grössen angetragen werden. Die blaue Kurve repräsentiert
das Ergebnis von arcTo.
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();
objContext.moveTo(60, 10);
objContext.arcTo(100, 60, 20, 90, 40);
objContext.stroke();
}else{
// Sonstiger Code
}
}
Anzeige (Browser)
Anzeige (richtig)
Nachfolgende Abbildung zeigt die Kurve, wie sie richtig angezeigt werden sollte.
