HTML5 - Courbes de Bézier

Le courbes de Bézier, Ce sont un type de courbes largement utilisé dans les programmes de dessin et de graphisme car ils nous permettent de générer des courbes avec certains points dans le plan, grâce à cela, avec certaines formules mathématiques, nous pouvons obtenir des courbes lisses ou plus exactes, que nous pouvons utiliser pour donner vous plus de détails à nos graphiques.
Dans HTML5 nous avons la possibilité de mettre en œuvre le courbes de Bézier Grâce à diverses méthodes, nous pouvons inclure des courbes quadratiques et cubiques, la limitation est que sur la toile nous n'avons pas de support visuel de l'endroit où nous avons les points de référence.
Méthodes pour générer les courbes
Comme nous l'avons déjà expliqué, les courbes de Bézier sont appuyées sur certains points pour pouvoir faire le dessin, afin d'obtenir la courbe souhaitée, nous devons faire de nombreuses expériences, cependant pour expérimenter nous devons d'abord connaître le fond, donc ensuite nous allons voir les informations correspondantes avec les méthodes qui nous permettent de tracer ces courbes :
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Tracez une courbe de Bézier de type cubique où les points (x, y) se rencontrent à l'aide des points de contrôle (cx1, cy1) et (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Tracez une courbe de Bézier quadratique aux points (x, y) avec le point de contrôle (cx, cy).
Nous connaissons déjà l'aspect technique avec lequel nous devons travailler, nous allons maintenant voir un exemple en code.
Dans cet exemple, nous allons dessiner une courbe de Bézier cubique, où nous allons prendre la dernière comme point de départ sous-chemin puis amenez-le aux points des deux derniers arguments que la méthode reçoit, en plus, il inclut une fonctionnalité qui, si nous appuyons sur la touche Maj ou Ctrl de notre clavier, les points de départ et de fin de la courbe changent.

 Exemple Votre navigateur ne supporte pas l'élément Toile 

Une fois que nous avons le code, voyons ce qu'il génère dans le navigateur, nous limitons cela comme il contient une section dynamique, les résultats peuvent varier :

Si nous regardons, nous avons les quatre points de contrôle marqués par les lignes rouges que nous voyons dans la capture d'écran.
Avec cela, nous terminons ce tutoriel sur les courbes de Bézier, la clé est l'expérimentation si nous voulons obtenir des effets plus complexes qui sont attachés à ce dont nous avons besoin.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif