CanvasRenderingContext2D: Methode bezierCurveTo()
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.bezierCurveTo()
der Canvas 2D API fügt dem aktuellen Unterpfad eine kubische Bézier-Kurve hinzu. Sie benötigt drei Punkte: die ersten beiden sind Kontrollpunkte und der dritte ist der Endpunkt. Der Startpunkt ist der zuletzt definierte Punkt im aktuellen Pfad, der durch die Verwendung von moveTo() vor dem Erstellen der Bézier-Kurve geändert werden kann.
Syntax
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Parameter
cp1x-
Die x-Achsen-Koordinate des ersten Kontrollpunkts.
cp1y-
Die y-Achsen-Koordinate des ersten Kontrollpunkts.
cp2x-
Die x-Achsen-Koordinate des zweiten Kontrollpunkts.
cp2y-
Die y-Achsen-Koordinate des zweiten Kontrollpunkts.
x-
Die x-Achsen-Koordinate des Endpunkts.
y-
Die y-Achsen-Koordinate des Endpunkts.
Rückgabewert
Keiner (undefined).
Beispiele
Funktionsweise von bezierCurveTo
Dieses Beispiel zeigt, wie eine kubische Bézier-Kurve gezeichnet wird.
HTML
<canvas id="canvas"></canvas>
JavaScript
// Define canvas and context
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Define the points as {x, y}
let start = { x: 50, y: 20 };
let cp1 = { x: 230, y: 30 };
let cp2 = { x: 150, y: 80 };
let end = { x: 250, y: 100 };
// Cubic Bézier curve
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();
// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI); // Start point
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI); // End point
ctx.fill();
// Control points
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI); // Control point one
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI); // Control point two
ctx.fill();
Ergebnis
In diesem Beispiel sind die Kontrollpunkte rot und die Start- und Endpunkte blau.
Eine einfache Bézier-Kurve
Dieses Beispiel zeichnet eine einfache Bézier-Kurve mit bezierCurveTo().
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Kurve beginnt an dem durch moveTo() angegebenen Punkt: (30, 30). Der erste Kontrollpunkt befindet sich bei (120, 160) und der zweite bei (180, 10). Die Kurve endet bei (220, 140).
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.bezierCurveTo(120, 160, 180, 10, 220, 140);
ctx.stroke();
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML Standard # dom-context-2d-beziercurveto-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D - Bézier-Kurve