Beispiel
Zeichnen Sie eine quadratische Bézier-Kurve:
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 in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die quadraticCurveTo() Methode fügt einen Punkt , um den Strompfad durch die angegebenen Kontrollpunkte verwenden , die eine quadratische Bézier - 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, verwenden Sie die beginPath() und moveTo() Methoden , um einen Ausgangspunkt zu definieren.
Tipp: Ü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 " |