HTML-Canvas bezierCurveTo()Methode

HTML canvas 参考手册HTML-Canvas-Referenz

Beispiel

Zeichnen Sie eine kubische Bézier-Kurve:

Ihr Browser unterstützt das HTML5-Canvas-Tag nicht.

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();

Selbst ausprobieren »

Browser-Unterstützung

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die bezierCurveTo()-Methode.

Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Definition und Verwendung

Die Methode bezierCurveTo() fügt dem aktuellen Pfad einen Punkt hinzu, indem sie die angegebenen Kontrollpunkte verwendet, die eine kubische Bézier-Kurve darstellen.

Eine kubische Bézier-Kurve benötigt drei Punkte. Die ersten beiden Punkte sind Kontrollpunkte, die in der kubischen Bézier-Berechnung verwendet werden, 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 diebeginPath()undmoveTo()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)

Tipp:Bitte sehen Sie sich diequadraticCurveTo()Methode an. Sie hat einen Kontrollpunkt statt zwei.


JavaScript-Syntax: context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

Parameterwerte

Parameter Beschreibung
cp1x Die x-Koordinate des ersten Bézier-Kontrollpunkts.
cp1y Die y-Koordinate des ersten Bézier-Kontrollpunkts.
cp2x Die x-Koordinate des zweiten Bézier-Kontrollpunkts.
cp2y Die y-Koordinate des zweiten Bézier-Kontrollpunkts.
x Die x-Koordinate des Endpunkts.
y Die y-Koordinate des Endpunkts.

HTML canvas 参考手册HTML-Canvas-Referenz Andere Erweiterungen