Dokumentation (canvas.quaese.de)
 

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.

bezierCurveTo()

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.

Anzeige

Ihr Browser unterstützt das canvas-Element leider nicht.

 
Dokument zuletzt modifiziert: 05.02.2008, 14:28 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap