HTML-Canvas quadraticCurveTo()- Methode
Beispiel
Zeichnen Sie eine quadratische Bézier-Kurve:
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();
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
Definition und Verwendung
Die quadraticCurveTo()-Methode fügt dem aktuellen Pfad einen Punkt hinzu, indem sie die angegebenen Kontrollpunkte verwendet, die eine quadratische Bézier-Kurve darstellen.
Eine quadratische Bézier-Kurve erfordert zwei Punkte. Der erste Punkt ist ein Kontrollpunkt, der in der quadratischen Bézier-Berechnung verwendet wird, und der zweite 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 bezierCurveTo() an . Es hat zwei Kontrollpunkte statt einem.
| JavaScript-Syntax: | Kontext .quadraticCurveTo( cpx,cpy,x,y ); |
|---|
Parameterwerte
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ HTML-Canvas-Referenz