Canvas quadraticCurveTo() Methode
Definition und Verwendung
quadraticCurveTo() Methode, um einen Punkt zum aktuellen Pfad hinzuzufügen, indem sie den angegebenen Kontrollpunkt der Quadratischen Bezier-Kurve verwendet.
Hinweis:Eine Quadratische Bezier-Kurve erfordert zwei Punkte. Der erste Punkt ist der Kontrollpunkt für die Quadratische Bezier-Rechnung, der zweite Punkt ist der Endpunkt der Kurve. Der Startpunkt der Kurve ist der letzte Punkt im aktuellen Pfad. Wenn es keinen Pfad gibt, 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 auch bezierCurveTo() Methode. Sie 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 | Die x-Koordinate des Bezier-Kontrollpunkts. |
| cpy | Die y-Koordinate des Bezier-Kontrollpunkts. |
| x | Die x-Koordinate des Endpunkts. |
| y | Die y-Koordinate des Endpunkts. |
Browser-Unterstützung
Tabelle: Die Nummern weisen auf die erste Version des Browsers hin, 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.
