Pfad-Schnittstelle - quadraticCurveTo()
Mit der Methode quadraticCurveTo können komplexe Kurven erzeugt werden. Eine solche Kurve
wird durch einen Start- und einen Endpunkt begrenzt. Jeder dieser Punkte ist mit einer Beziertangente versehen,
an deren Schnittpunkt 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.
quadraticCurveTo
void quadraticCurveTo(cpx, cpy, x, y)
Die Methode erwartet sechs Parameter.
Parameter
cpx - Horizontale Kompontente des ersten Kontrollpunkts (control point)
cpy - Vertikale Komponente des ersten 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. Der rote Punkt ist der Kontrollpunkt, der als Anfasser zum Ziehen der Tangenten dient.
(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.translate(50, 0);
objContext.moveTo(50, 150);
objContext.quadraticCurveTo(75, 200, 100, 150);
objContext.quadraticCurveTo(200, 125, 100, 100);
objContext.quadraticCurveTo(75, 50, 50, 100);
objContext.quadraticCurveTo(-50, 125, 50, 150);
objContext.closePath();
objContext.fillStyle = "#a00";
objContext.fill();
objContext.stroke();
objContext.beginPath();
objContext.scale(0.5, 0.5);
objContext.translate(75, 125);
objContext.moveTo(50, 150);
objContext.quadraticCurveTo(75, 200, 100, 150);
objContext.quadraticCurveTo(200, 125, 100, 100);
objContext.quadraticCurveTo(75, 50, 50, 100);
objContext.quadraticCurveTo(-50, 125, 50, 150);
objContext.closePath();
objContext.strokeStyle = "#fff";
objContext.fillStyle = "#b55";
objContext.fill();
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.