CanvasRenderingContext2D: Methode quadraticCurveTo()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die Methode
CanvasRenderingContext2D.quadraticCurveTo()
der Canvas 2D API fügt dem aktuellen Unterpfad eine quadratische Bézier-Kurve hinzu. Sie benötigt zwei Punkte: Der erste ist ein Kontrollpunkt und der zweite ist
der Endpunkt. Der Startpunkt ist der zuletzt festgelegte Punkt im aktuellen Pfad, der mit moveTo() geändert werden kann, bevor die quadratische Bézier-Kurve erstellt wird.
Syntax
quadraticCurveTo(cpx, cpy, x, y)
Parameter
Rückgabewert
Keiner (undefined).
Beispiele
Funktionsweise von quadraticCurveTo
Dieses Beispiel zeigt, wie eine quadratische Bézier-Kurve gezeichnet wird.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();
// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point
ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point
ctx.fill();
// Control point
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();
Ergebnis
In diesem Beispiel ist der Kontrollpunkt rot und die Start- und Endpunkte sind blau.
Eine einfache quadratische Kurve
Dieses Beispiel zeichnet eine einfache quadratische Bézier-Kurve mit
quadraticCurveTo().
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Kurve beginnt an dem von moveTo() angegebenen Punkt: (20, 110). Der Kontrollpunkt befindet sich bei (230, 150). Die Kurve endet bei (250, 20).
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 110);
ctx.quadraticCurveTo(230, 150, 250, 20);
ctx.stroke();
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML Standard # dom-context-2d-quadraticcurveto-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D - Bézier-Kurve