Comment dessiner la courbe de Bézier en utilisant HTML5 Canvas ?-tutoriel HTML-php.cn

Comment dessiner la courbe de Bézier en utilisant HTML5 Canvas ?

WBOY

Libérer： 2023-09-02 20:21:05

avant

1370 Les gens l'ont consulté

La balise

HTML5

Pour dessiner une courbe de Bézier à l'aide d'un canevas HTML5, utilisez la méthode bezierCurveTo(). Cette méthode ajoute le point donné au chemin actuel, en le connectant au chemin précédent via une courbe de Bézier cubique avec les points de contrôle donnés.

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

Vous pouvez essayer d'exécuter le code suivant pour apprendre à dessiner des courbes de Bézier sur HTML5 Canvas. Les paramètres x et y de la méthode bezierCurveTo() sont les coordonnées des points finaux. cp1x et cp1y sont les coordonnées du premier point de contrôle, et cp2x et cp2y sont les coordonnées du deuxième point de contrôle.

Exemple

<!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>

Copier après la connexion