HTML Referenzhandbuch

HTML-Tag-Übersicht

HTML canvas bezierCurveTo() Methode

bezierCurveTo() ist ein Canvas 2D API zur Zeichnung von dreifachen Bézier-Kurvenpfaden. Diese Methode erfordert drei Punkte. Der erste und zweite Punkt sind Kontrollpunkte, der dritte Punkt ist der Endpunkt. Der Startpunkt ist der letzte Punkt im aktuellen Pfad, und der Punkt kann vor der Zeichnung der Bézier-Kurve durch Aufruf von moveTo() geändert werden.

HTML Canvas Referenzhandbuch

Online-Beispiel

Zeichnen Sie eine dreifache Bézier-Kurve:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Verwendung des HTML canvas bezierCurveTo() Methods-Grund教程(w3(codebox.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

Testen Sie heraus, ob ‹/›

Browser-Kompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9und Firefox, Opera, Chrome und Safari unterstützen bezierCurveTo() Methode.

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

Definition und Verwendung

Die Methode bezierCurveTo() fügt Punkte zu dem aktuellen Pfad hinzu, indem sie die spezifischen Kontrollpunkte einer dreifachen Bézier-Kurve verwendet.

Für eine dreifache Bezier-Kurve sind drei Punkte erforderlich. Die ersten beiden Punkte sind Kontrollpunkte für die dreifache Bezier-Berechnung und der dritte Punkt ist der Endpunkt der Kurve. Der Startpunkt der Kurve ist der letzte Punkt im aktuellen Pfad. Wenn es keinen Pfad gibt, verwenden Sie bitte beginPath() und moveTo() Methode, um den Startpunkt zu definieren.

Startpunkt:

moveTo(20,20)

Kontrollpunkt 1:

bezierCurveTo(20,100,200,100,200,20)

Kontrollpunkt 2:

bezierCurveTo(20,100,200,100,200,20)

Endpunkt:

bezierCurveTo(20,100,200,100,200,20)

Hinweis:Siehe auch quadraticCurveTo() Methode. Sie hat einen Kontrollpunkt, nicht zwei.

JavaScript Syntax:	context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

Parameterwert

Parameter	Beschreibung
cp1x	X-Koordinate des ersten Bezier-Kontrollpunkts.
cp1y	Y-Koordinate des ersten Bezier-Kontrollpunkts.
cp2x	X-Koordinate des zweiten Bezier-Kontrollpunkts.
cp2y	Y-Koordinate des zweiten Bezier-Kontrollpunkts.
x	X-Koordinate des Endpunkts.
y	Y-Koordinate des Endpunkts.

HTML Canvas Referenzhandbuch

HTML: <template> Tag