HTML-Leinwand bezierCurveTo () -Methode
Beispiele
Zeichnet eine kubische Bezier-Kurve:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Versuchen »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari Unterstützung bezierCurveTo () -Methode.
Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.
Definition und Verwendung
bezierCurveTo () -Methode durch die angegebenen Kontrollpunkte unter Verwendung repräsentieren kubischen Bezier-Kurven, fügt einen Punkt auf den aktuellen Pfad.
Kubische Bezier-Kurve erfordert drei Punkte. Die ersten beiden Punkte werden verwendet, um die kubischen Bezier-Kontrollpunkten zu berechnen, wobei der dritte Punkt ist der Endpunkt der Kurve. Startpunkt der Kurve ist der Strompfad in den letzten Punkt. Wenn der Pfad nicht existiert, dann verwenden beginPath () und moveTo () Methode , um den Ausgangspunkt zu definieren.
Tipp: Schauen Sie sich quadraticCurveTo () Methode.Es hat einen Kontrollpunkt statt zwei.
| JavaScript-Syntax: | Kontext .bezierCurveTo (cp1x, CP1Y, cp2x, cp2y, x, y); |
|---|
Parameter Wert
| 参数 | 描述 |
|---|---|
| cp1x | 第一个贝塞尔控制点的 x 坐标。 |
| cp1y | 第一个贝塞尔控制点的 y 坐标。 |
| cp2x | 第二个贝塞尔控制点的 x 坐标。 |
| cp2y | 第二个贝塞尔控制点的 y 坐标。 |
| x | 结束点的 x 坐标。 |
| y | 结束点的 y 坐标。 |