Pfad-Schnittstelle - bezierCurveTo()
Mit der Methode bezierCurveTo können komplexe Kurven erzeugt werden. Eine solche Kurve
wird durch einen Start- und einen Endpunkt begrenzt. Jeder dieser Punkte ist mit einer Formtangente versehen,
an deren Enden sich ein Kontrollpunkt (control point) zum Ziehen befindet (siehe Abbildung).
Der Startpunkt der Bezierkurve wird mit dem letzten Punkt des Subpfades verbunden. Existiert kein
Unterpfad, so tut bezierCurveTo nichts.
Die beiden letzten Argumente (x und y) repräsentieren den Endpunkt der Kurve.
Der Durchlauf von Start- zu Endpunkt erfolgt gegen den Uhrzeigersinn.
bezierCurveTo
void bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Die Methode erwartet sechs Parameter.
Parameter
cp1x - Horizontale Kompontente des ersten Kontrollpunkts (control point)
cp1y - Vertikale Komponente des ersten Kontrollpunkts (control point)
cp2x - Horizontale Kompontente des zweiten Kontrollpunkts (control point)
cp2y - Vertikale Komponente des zweiten Kontrollpunkts (control point)
x - Horizontale Kompontente des Endpunkts der Kurve
y - Vertikale Komponente des Endpunktes der Kurve
Schematische Darstellung
Die nachfolgende Abbildung zeigt das Schema einer Bezierkurve. Die gelben Geraden entsprechen den "Beziertangenten" an den Endpunkten der Kurve. Die roten Punkte sind die Kontrollpunkte, die als Anfasser zum Ziehen der Tangenten dienen.
(x0, y0) ist der letzte Punkt eines existenten Subpfades. Es wurde zur Verdeutlichung eine gerade Verbindung mit der Bezierkurve angedeutet. In der Realität fallen die beiden Punkte zusammen.
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.moveTo(50, 10);
objContext.bezierCurveTo(100, 100, 20, 80, 100, 10);
objContext.closePath();
objContext.stroke();
objContext.beginPath();
objContext.moveTo(150, 10);
objContext.bezierCurveTo(120, 180, 80, 20, 250, 100);
objContext.closePath();
objContext.strokeStyle = "#f00";
objContext.stroke();
}else{
// Sonstiger Code
}
}
Erläuterung
Die Routine zeichnet zwei Bezierkurven. Da es schwer ist, das Vorgehen dabei zu erklären, wird empfohlen, mit der Methode zu experimentieren.