HTML canvas quadraticCurveTo() Methode
Definition und Verwendung
quadraticCurveTo() Methode, um einen Punkt zum aktuellen Pfad hinzuzufügen, indem Sie die spezifischen Kontrollpunkte der Quadratischen Bezier-Kurve darstellen.
Hinweis:Eine Quadratische Bezier-Kurve erfordert zwei Punkte. Der erste Punkt ist der Kontrollpunkt für die Quadratische Bezier-Berechnung, der zweite Punkt ist der Endpunkt der Kurve. Der Startpunkt der Kurve ist der letzte Punkt im aktuellen Pfad. Wenn kein Pfad existiert, verwenden Sie bitte beginPath() und moveTo() Methode, um den Startpunkt zu definieren.
- Startpunkt: moveTo(
20,20) - Kontrollpunkt: quadraticCurveTo(
20,100,200,20) - Endpunkt: quadraticCurveTo(20,100,
200,20)
Hinweis:Siehe bezierCurveTo() Methode。Es hat zwei Kontrollpunkte, nicht einen.
Beispiel
Zeichnen Sie eine Quadratische Bezier-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();
Syntax
context.quadraticCurveTo(cpx,cpy,x,y);
Parameterwert
| Parameter | Beschreibung |
|---|---|
| cpx | X-Koordinate des Bezier-Kontrollpunkts. |
| cpy | Y-Koordinate des Bezier-Kontrollpunkts. |
| x | X-Koordinate des Endpunkts. |
| y | Y-Koordinate des Endpunkts. |
Browserkompatibilität
Die in der Tabelle genannten Zahlen geben die erste Browserversion an, die diese Eigenschaft vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
