HTML Canvas bezierCurveTo() Methode
Definition und Verwendung
bezierCurveTo() Methode, um einen Punkt zum aktuellen Pfad hinzuzufügen, indem Sie die spezifischen Kontrollpunkte der dreifachen Bézier-Kurve angeben.
Hinweis:Für eine dreifache Bézier-Kurve sind drei Punkte erforderlich. Die ersten beiden Punkte sind Kontrollpunkte für die dreifache Bézier-Berechnung und der dritte Punkt ist der Endpunkt der Kurve. Der Startpunkt der Kurve ist der letzte Punkt im aktuellen Pfad. Wenn der Pfad nicht existiert, verwenden Sie bitte beginPath() und moveTo() Methode, um den Startpunkt zu definieren.
- Startpunkt: moveTo(
20,20) - Kontrollpunkt 1: bezierCurveTo(
20,100,200,100,200,20) - Kontrollpunkt 2: bezierCurveTo(20,100,
200,100,200,20) - Endpunkt: bezierCurveTo(20,100,200,100,
200,20)
Hinweis:Siehe quadraticCurveTo() Methode。Es hat einen Kontrollpunkt, nicht zwei.
Beispiel
Zeichnen Sie eine dreifache Bézier-Kurve:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Syntax
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Parameterwert
| Parameter | Beschreibung |
|---|---|
| cp1x | X-Koordinate des ersten Bezier-Kontrollpunkts. |
| cp1y | Y-Koordinate des ersten Bezier-Kontrollpunkts. |
| cp2x | X-Koordinate des zweiten Bezier-Kontrollpunkts. |
| cp2y | Y-Koordinate des zweiten Bezier-Kontrollpunkts. |
| x | X-Koordinate des Endpunkts. |
| y | Y-Koordinate des Endpunkts. |
Browser-Unterstützung
Die Zahlen in der Tabelle weisen auf die erste Browser-Version 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 den <canvas>-Element nicht.
