Neueste Web-Entwicklung Tutorials
 

HTML canvas quadraticCurveTo() Method

<HTML Canvas Referenz

Beispiel

Zeichnen Sie eine quadratische Bézier-Kurve:

YourbrowserdoesnotsupporttheHTML5canvastag.

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();
Versuch es selber "

Browser-Unterstützung

Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode in vollem Umfang unterstützt.

Methode
quadraticCurveTo() ja 9.0 ja ja ja

Definition und Verwendung

Die quadraticCurveTo() Methode fügt einen Punkt , um den Strompfad durch die angegebenen Kontrollpunkte verwenden , die eine quadratische Bézier - Kurve darstellen.

Eine quadratische Bezier-Kurve erfordert zwei Punkte. Der erste Punkt ist ein Steuerpunkt, der in der quadratischen Bezier-Berechnung verwendet wird, und der zweite Punkt ist der Endpunkt für die Kurve. Der Ausgangspunkt für die Kurve ist der letzte Punkt in dem Strompfad. Wenn ein Pfad nicht existiert, verwenden Sie die beginPath() und moveTo() Methoden , um einen Ausgangspunkt zu definieren.

Eine quadratische Bézierkurve

Startpunkt:
moveTo (20,20)
Kontrollpunkt:
quadraticCurveTo (20.100, 200,20)
Endpunkt:
quadraticCurveTo (20.100, 200,20)

Tipp: Überprüfen Sie die aus bezierCurveTo() Methode.Es verfügt über zwei Kontrollpunkte statt einer.


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

Parameterwerte

Parameter Beschreibung Spiel es
cpx Die x-Koordinate des Bezier-Kontrollpunkt Spiel es "
cpy Die y-Koordinate der Bezier-Kontrollpunkt Spiel es "
x Die x-Koordinate des Endpunkts Spiel es "
y Die y-Koordinate des Endpunkts Spiel es "

<HTML Canvas Referenz