HTML-Leinwand bezierCurveTo() Methode
Beispiel
Zeichnen Sie eine kubische 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();
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die Methode bezierCurveTo().
Definition und Verwendung
Die bezierCurveTo()-Methode fügt dem aktuellen Pfad einen Punkt hinzu, indem sie die angegebenen Steuerpunkte verwendet, die eine kubische Bézier-Kurve darstellen.
Eine kubische Bezierkurve erfordert drei Punkte. Die ersten beiden Punkte sind Kontrollpunkte, die in der kubischen Bézier-Berechnung verwendet werden, und der letzte Punkt ist der Endpunkt der Kurve. Der Startpunkt für die Kurve ist der letzte Punkt im Strompfad. Wenn kein Pfad vorhanden ist, verwenden Sie die Methoden beginPath() und moveTo() , um einen Startpunkt zu definieren.
Tipp: Sehen Sie sich die Methode quadraticCurveTo() an. Es hat einen Kontrollpunkt statt zwei.
| JavaScript-Syntax: | Kontext .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ); |
|---|
Parameterwerte
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ HTML-Canvas-Referenz