Dokumentation (canvas.quaese.de)
 

Rechtecke -

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.

quadraticCurveTo()

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.

Anzeige

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

quadraticCurveTo-Bug (Firefox 1.5)

Workaround

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