Wie zeichne ich eine Bezier-Kurve mit HTML5 Canvas?-HTML-Tutorial-php.cn

Wie zeichne ich eine Bezier-Kurve mit HTML5 Canvas?

WBOY

Freigeben： 2023-09-02 20:21:05

nach vorne

1332 Leute haben es durchsucht

Das

HTML5

Um eine Bezier-Kurve mit HTML5-Canvas zu zeichnen, verwenden Sie die Methode bezierCurveTo(). Diese Methode fügt den angegebenen Punkt zum aktuellen Pfad hinzu und verbindet ihn über eine kubische Bezier-Kurve mit den angegebenen Kontrollpunkten mit dem vorherigen Pfad.

如何使用HTML5 Canvas绘制贝塞尔曲线？

Sie können versuchen, den folgenden Code auszuführen, um zu lernen, wie man Bezier-Kurven auf HTML5 Canvas zeichnet. Die x- und y-Parameter in der bezierCurveTo()-Methode sind die Koordinaten der Endpunkte. cp1x und cp1y sind die Koordinaten des ersten Kontrollpunkts und cp2x und cp2y sind die Koordinaten des zweiten Kontrollpunkts.

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>

<body>
<canvas id = "newCanvas" width = "500" height = "300" style = "border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById(&#39;newCanvas&#39;);
var ctx = c.getContext(&#39;2d&#39;);
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
</script>

</body>
</html>

Nach dem Login kopieren

Ausgabe

如何使用HTML5 Canvas绘制贝塞尔曲线？

Das obige ist der detaillierte Inhalt vonWie zeichne ich eine Bezier-Kurve mit HTML5 Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!