HTML5 - Dessiner des courbes

Dessiner des courbes sur un canevas peut être simple ou complexe, tout dépend de ce que vous voulez réaliser, vous pouvez faire des effets intéressants, que nous pourrions utiliser pour construire certaines fonctionnalités sur notre page, qui se démarquent du reste des pages réalisées dans HTML5.
L'une des choses que nous pouvons faire est de donner une gestion avancée à la création de lignes courbes, avec ce type d'outils, nous serons plus près de ne pas avoir de limites en pensant à ce que notre page peut faire.
Tracer une courbe en déplaçant la souris
Ce cas est assez intéressant car ce que nous faisons est de tracer une courbe en déplaçant la souris, de plus si nous appuyons sur n'importe quelle touche de notre clavier, certains points de la courbe changent.
Par exemple, si on appuie sur la touche ctrl, le premier point qui représente la fin du sous-chemin, si nous appuyons sur la touche majuscule, le deuxième point se déplacera, qui sont les deux premiers arguments de la méthode arcVers () et enfin, si nous n'appuyons sur aucune touche, le troisième point représenté par les deux derniers arguments de la méthode se déplacera.
Voyons ci-dessous le code avec lequel nous obtenons ces effets :

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

Comme nous pouvons le voir, d'abord dans le code, nous définissons le gestionnaire de la réception des événements des touches sur lesquelles nous appuyons, nous y établissons les valeurs qui doivent être prises.
Voyons ci-dessous une capture d'écran de la façon dont cela pourrait résulter dans notre navigateur, il est important de mentionner qu'étant dynamiques les résultats peuvent varier lors de la reproduction de cet exemple :

Utilisation de la méthode Arc
Auparavant, nous n'avions utilisé que la méthode arcVers ()Maintenant, nous allons voir comment fonctionne la méthode arc(), sa manipulation est plus facile, puisque nous spécifions un point sur le canevas via les deux premiers arguments puis le rayon et l'angle de la courbe.
Voyons l'exemple suivant de la façon de dessiner trois types de courbes avec cette méthode :

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

Voyons maintenant à quoi cela ressemble dans notre navigateur :

Comme nous le voyons, les premier et deuxième exemples sont des cercles, l'un complet et l'autre avec une petite ouverture, par contre le troisième cercle est totalement irrégulier et nous montre la polyvalence de la méthode arc ().Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif