Table des matières
Fondamentalement toutes les figures sont faites de lignes et de courbes, dans de nombreux cas nous pouvons simuler des courbes en utilisant des lignes très courtes et en grand nombre, cependant cela est très complexe et implique un travail exceptionnel, HTML5 et sa praticité nous offrent la Méthode de l'arc Avec lequel nous pouvons développer des lignes courbes et en quelque sorte compléter nos dessins.Méthode de l'arc
Comme nous l'avons mentionné au début, cette méthode nous permet de générer des lignes courbes au sein de l'élément Toile sans plus de complexité, sans qu'il soit nécessaire d'introduire des formules mathématiques complexes comme cela peut être le cas dans certains langages de programmation.
Avant de voir comment fonctionne cette méthode, il faut connaître ses caractéristiques et propriétés, nous les verrons ci-dessous dans la liste suivante :
- arc (x, y, rad, angle de départ, angle final, direction): Cette méthode trace une courbe aux coordonnées (x, y) avec un rayon rad, l'angle de départ est angle initial et la fin de l'angle est angleFinal. Nous avons un paramètre optionnel qui est adresse et spécifie la direction que prendra la courbe tracée par la méthode.
- arcTo (x1, y1, x2, y2, rad) : Cette méthode nous permet de tracer une courbe aux coordonnées (x2, y2) qui passent les coordonnées (x1, y1) et a un rayon rad.
Comme nous pouvons le voir, nous avons deux méthodes de base qui nous permettent tout ce qui est nécessaire pour pouvoir tracer les lignes courbes dans notre élément de toile, voyons maintenant un petit code pour montrer comment mettre en pratique ce que nous venons de voir :
Exemple Votre navigateur ne prend pas en charge le Toile élément Nous avons fait la ligne courbe dans l'exemple en utilisant la méthode arcVers () que nous avions précédemment décrit, pour tracer cette courbe nous dépendons de deux lignes, la première est tirée de la fin du dernier sous-chemin jusqu'au point décrit par les deux premiers arguments de la méthode et la deuxième ligne est tirée du point décrit par les deux premiers arguments jusqu'au point décrit par les troisième et quatrième arguments.
Enfin, la courbe est dessinée comme la ligne la plus courte entre le dernier sous-chemin et le deuxième point qui décrit une courbe d'un cercle avec le rayon spécifié par le dernier argument, afin que nous puissions voir ce que nous voulons dire, le code incorpore quelques lignes de référence en rouge. Voyons ci-dessous une image de ce à quoi cela ressemble dans notre navigateur :
