HTML-Canvas quadraticCurveTo()Methode

HTML canvas 参考手册HTML canvas Referenzhandbuch

Beispiele

Zeichnen Sie eine quadratische Bezier-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.quadraticCurveTo(20,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 quadraticCurveTo()-Methode.

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

Definition und Verwendung

Die quadraticCurveTo()-Methode fügt dem aktuellen Pfad einen Punkt hinzu, wobei die angegebenen Kontrollpunkte verwendet werden, die eine quadratische Bezier-Kurve darstellen.

Eine quadratische Bezier-Kurve erfordert zwei Punkte. Der erste Punkt ist der Kontrollpunkt, der in der Berechnung der quadratischen Bezier-Kurve verwendet wird, und der zweite 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:
quadraticCurveTo(20,100,200,20)
Endpunkt:
quadraticCurveTo(20,100,200,20)

Tipp:Siehe diebezierCurveTo()-Methode. Sie hat zwei Kontrollpunkte statt einem.


JavaScript-Syntax: context.quadraticCurveTo(cpx,cpy,x,y);

Parameterwerte

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.

HTML canvas 参考手册HTML-Canvas-Referenzhandbuch Weitere Erweiterungen