recherche

Maison >interface Web >tutoriel HTML >Comment dessiner la courbe de Bézier en utilisant HTML5 Canvas ?

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

WBOY
WBOYavant
2023-09-02 20:21:051404parcourir

La balise

HTML5 est utilisée pour dessiner des graphiques, des animations, etc. à l'aide de scripts. Il s'agit d'une nouvelle balise introduite en HTML5. L'élément canvas possède une méthode DOM appelée getContext, qui obtient le contexte de rendu et ses fonctions de dessin. Cette fonction prend un argument, le type de contexte 2d.

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>

Sortie

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 dom canvas
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Tutoriel OpenCart : Personnalisation des méthodes d'expédition (Partie 1)Article suivant：Tutoriel OpenCart : Personnalisation des méthodes d'expédition (Partie 1)

Articles Liés

Voir plus