Beispiel
Zeichnen Sie eine quadratische Bézierkurve:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke(); Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die quadraticCurveTo() Methode fügt einen Punkt , um den Strompfad durch die angegebenen Kontrollpunkte , die unter Verwendung einer quadratischen Bezier - Kurve darstellen.
Eine quadratische Bezier-Kurve erfordert zwei Punkte. Der erste Punkt ist ein Steuerpunkt, der in der quadratischen Bezier-Berechnung verwendet wird, und der zweite Punkt ist der Endpunkt für die Kurve. Der Ausgangspunkt für die Kurve ist der letzte Punkt in dem Strompfad. Wenn ein Pfad nicht existiert, verwendet , um die beginPath() und moveTo() Methoden , um einen Startpunkt zu definieren.
Tip: Überprüfen Sie die aus bezierCurveTo() Methode. Es verfügt über zwei Kontrollpunkte statt einer.
| JavaScript-Syntax: | context . quadraticCurveTo( cpx,cpy,x,y ) ; |
|---|
Parameterwerte
| Parameter | Beschreibung | Spiel es |
|---|---|---|
| cpx | Die x-Koordinate des Bezier-Kontrollpunkt | Spiel es " |
| cpy | Die y-Koordinate der Bezier-Kontrollpunkt | Spiel es " |
| x | Die x-Koordinate des Endpunkts | Spiel es " |
| y | Die y-Koordinate des Endpunkts | Spiel es " |