Créer un cercle sur Canvas en JavaScript

Cet article explore les différentes méthodes pour dessiner des formes sur un élément canvas en utilisant JavaScript, en mettant l'accent sur la création de cercles et d'autres formes géométriques, ainsi que sur la manipulation des couleurs et des styles.

Schéma d'un élément canvas HTML avec un exemple de dessin.

Introduction à l'outil Arc-en-ciel

Le tutoriel présente l'outil Arc-en-ciel, un outil innovant conçu pour faciliter la création de dessins sur l'élément canvas à l'aide de la souris. Cet outil permet de dessiner une variété de formes, notamment des rectangles, des cercles, des arcs, des polygones, des lignes, des courbes de Bézier (quadratiques et cubiques) et d'insérer du texte. Il génère également le code JavaScript correspondant à ces dessins.

Pour commencer à utiliser Arc-en-ciel, il est nécessaire d'appeler la fonction shapes.canvasInit(). Cette fonction peut être utilisée avec deux paramètres optionnels : le premier pour spécifier l'ID de votre élément canvas, et le second pour définir l'épaisseur de la bordure en pixels.

Fonctionnalités de Coloration

Une des fonctionnalités notables d'Arc-en-ciel est sa capacité à colorer les balises HTML. La fonction Couleur permet de sélectionner une couleur en fonction de la position de la souris sur l'écran. L'outil représente une palette où chaque position du curseur correspond à une couleur spécifique.

Le déplacement de la souris au milieu de l'écran donne du jaune.
Le déplacement vers la gauche fait virer la nuance au rouge.
Le déplacement vers la droite fait virer la nuance au vert.

Des principes similaires s'appliquent pour d'autres sélections de couleurs via clic droit :

Clic droit, Couleur :
- Gauche = jaune, Milieu = vert, Droite = cyan.
- Gauche = vert, Milieu = cyan, Droite = bleu.
- Gauche = cyan, Milieu = bleu, Droite = magenta.
- Gauche = bleu, Milieu = magenta, Droite = rouge.
- Gauche = magenta, Milieu = rouge, Droite = jaune.
Pour la palette chromatique complète, déplacez la souris verticalement. Le haut de l'écran représente le noir, et le bas le blanc.

Pour rétablir la valeur par défaut (blanc), effectuez un clic droit et sélectionnez Couleur.

En mode changer couleur :

Cliquer sur le bouton stoppe le changement horizontal. La teinte sélectionnée ne peut alors changer que verticalement dans les tons clairs et foncés, permettant d'obtenir toutes les nuances d'une couleur précise allant du noir au blanc.
Cliquer sur le bouton stoppe le changement vertical. La couleur sélectionnée ne peut alors changer qu'horizontalement, permettant d'obtenir toutes les couleurs d'un ton précis.
Pour ne plus cibler l'élément sélectionné, cliquez sur le bouton .

Dessin de Formes Géométriques

L'outil Arc-en-ciel permet de dessiner diverses formes géométriques sur le canvas. Les opérations de dessin impliquent souvent la manipulation du point de départ du crayon, la définition des dimensions et des couleurs, ainsi que des options pour le remplissage ou le contour.

Dessin de Rectangles

Pour commencer à dessiner un rectangle, sélectionnez l'onglet Dessiner. Cliquez sur le bouton pour activer le mode de dessin de rectangle. Vous devrez confirmer chaque nouveau rectangle.

Positionnez la souris sur le canvas ; les coordonnées X et Y relatives au coin supérieur gauche du canvas apparaissent. Déplacez la souris pour placer le coin supérieur gauche du rectangle et cliquez pour le fixer. Ensuite, déplacez la souris pour définir le coin inférieur droit et les dimensions du rectangle, puis cliquez à nouveau pour fixer ces dimensions.

Deux options sont disponibles pour le rendu du rectangle :

Surface : Dessine un rectangle plein.
Contour : Dessine uniquement le périmètre du rectangle.

L'option Contour active un champ permettant de spécifier l'épaisseur du trait en pixels. Il est également possible de changer le style de l'angle (normal, rond, biseau), ce qui est plus visible avec une épaisseur de contour conséquente.

Exemple de rendu de rectangles avec différentes épaisseurs de contour et styles d'angle.

Modification et Manipulation des Rectangles

Il est possible de modifier un rectangle existant en cliquant sur le bouton Modifier. Après avoir cliqué sur le canvas, les coins du rectangle s'affichent, permettant de changer son emplacement. De même, le bouton Déplacer permet de déplacer le rectangle sur le canvas.

Pour colorer un rectangle, utilisez le bouton Couleur, qui lance la fonction de sélection de couleur. Les flèches du clavier peuvent être utilisées pour ajuster les nuances chromatiques horizontalement et les teintes claires/foncées verticalement. L'affichage des couleurs se fait en format RGB. Pour terminer la coloration, cliquez sur le bouton

ou appuyez sur la touche Échap.

La duplication d'un rectangle se fait avec le bouton Copier, créant une nouvelle forme décalée de 20 pixels vers la droite et le bas. La suppression s'effectue avec le bouton Effacer.

Le champ texte en bas à droite permet de sélectionner la forme sur laquelle les actions vont s'appliquer, en entrant son numéro d'ordre.

Dessin de Disques et Cercles

Pour dessiner des disques et des cercles, les paramètres Surface, Contour et Épaisseur sont toujours disponibles. Les boutons Modifier, Déplacer, Couleur, Copier, Effacer et Générer fonctionnent de manière similaire aux rectangles.

Dessin d'un Disque

Cliquez sur le bouton Disque. Positionnez la souris sur le canvas pour définir le centre du disque. Cliquez pour le fixer. Déplacez ensuite la souris horizontalement pour ajuster le rayon du disque.

Dessin d'un Cercle

Pour dessiner un cercle, sélectionnez l'option Cercle. Pour modifier le rayon d'un disque ou d'un cercle, utilisez le bouton Modifier le rayon. Positionnez la souris, cliquez pour fixer le point de départ, puis déplacez la souris horizontalement pour agrandir ou diminuer le rayon.

Comparaison visuelle entre un disque plein et un cercle avec contour.

Dessin d'Arcs

Les arcs représentent des portions de cercles. Après avoir dessiné un cercle, il faut spécifier le point de départ et le point d'arrivée sur le périmètre.

Les paramètres Surface et Ouvert permettent de créer un arc plein ou ouvert. Le paramètre Extrémité définit la terminaison de l'arc (normal, rond, carré). Les affichages des positions X, Y, et rayon donnent les dimensions en pixels, tandis que les affichages premier radian, deuxième radian, et angle fournissent des informations sur la position et la mesure de l'arc.

Pour dessiner un arc :

Cliquez sur le bouton Arc.
Positionnez la souris sur le canvas pour définir le centre, puis cliquez pour le fixer.
Tracez le cercle qui servira de base à l'arc en déplaçant la souris horizontalement, puis cliquez pour fixer le rayon.
Déplacez la souris horizontalement pour définir le premier point de l'arc, puis cliquez pour le fixer.
Déplacez la souris horizontalement pour définir le deuxième point de l'arc, puis cliquez pour le fixer.

Pour créer un arc de cercle avec des extrémités spécifiques, utilisez les boutons radio Extrémité.

Illustration montrant les différents types d'extrémités d'un arc (normal, rond, carré).

Dessin de Lignes

Pour le dessin de lignes, le paramètre Nbr lignes permet d'en tracer plusieurs consécutivement. Il est également possible de choisir le type d'angle et d'extrémité.

Pour dessiner une ligne :

Sélectionnez l'option Ligne dans le menu déroulant.
Les paramètres Nbrlignes, Épaisseur, Angle et Extrémité apparaissent.
Cliquez sur le bouton de dessin. Positionnez la souris sur le canvas et cliquez pour fixer le point de départ de la ligne.
Pour dessiner plusieurs lignes à la suite, indiquez leur nombre dans le champ Nbr lignes.

La modification de lignes implique de cliquer sur le bouton Modifier, puis de sélectionner séquentiellement les points de chaque ligne.

Dessin de Polygones

Les polygones sont créés sur une base similaire aux lignes, avec la possibilité de choisir s'ils sont dessinés en surface ou en contour, avec une épaisseur et un angle réglables. Le paramètre Nbr lignes permet de définir le nombre de côtés de la figure.

Pour dessiner un polygone :

Sélectionnez l'option Polygone.
Le paramètre Nbr lignes (par défaut à 3 pour un triangle) apparaît.
Cliquez sur le bouton de dessin. Positionnez la souris sur le canvas pour le point de départ, puis cliquez pour fixer chaque sommet du polygone.

Il est possible de dessiner uniquement le contour des polygones, ce qui permet de sélectionner le type d'angle. La procédure est identique à celle des polygones pleins.

Exemple de polygones avec différents nombres de côtés et styles d'angles.

Dessin de Courbes de Bézier

Le canvas utilise les courbes de Bézier, qui se divisent en deux types : les quadriques (trois points) et les cubiques (quatre points).

Courbes de Bézier Quadriques

Pour dessiner une courbe quadrique :

Sélectionnez l'option Courbe Quadrique.
Cliquez sur le bouton de dessin. Positionnez la souris sur le canvas et cliquez pour fixer le point de départ.
Tracez la ligne jusqu'au point de fin, cliquez pour le fixer.
Déplacez ensuite la souris pour placer le troisième point, qui définit la courbe, puis cliquez pour finir.

Pour dessiner plusieurs courbes de suite, renseignez le nombre de lignes souhaité et répétez l'action.

Courbes de Bézier Cubiques

Pour dessiner une courbe cubique :

Cliquez sur l'option Courbe Cubique.
Positionnez la souris sur le canvas et cliquez pour fixer le point de départ.
Tracez la ligne, cliquez pour fixer le point de fin.
Déplacez la souris pour placer le troisième point (premier point de contrôle de la courbe), cliquez pour le fixer.
Déplacez ensuite la souris pour placer le quatrième point (second point de contrôle de la courbe), puis cliquez pour finir.

Pour dessiner plusieurs courbes cubiques à la suite, renseignez le nombre de lignes et répétez l'opération pour chaque courbe.

Comparaison visuelle entre une courbe de Bézier quadrique et une courbe de Bézier cubique.

Création de Cercles Pleins avec JavaScript

Pour dessiner un cercle plein en JavaScript sur un élément canvas, on utilise la méthode arc(). Pour obtenir un cercle complet, l'angle de départ est généralement 0 et l'angle final est 2 * Math.PI.

La méthode arc(x, y, rayon, angleDépart, angleFin) est utilisée. Pour que le cercle soit plein, une fonction personnalisée comme fillCircle peut être définie. Cette fonction trace l'arc, puis utilise la méthode lineTo() pour tracer un rayon du centre vers le dernier point de l'arc, et enfin fill() pour colorer le secteur.

L'ajustement de l'angle de départ (par exemple, soustraire Math.PI / 2) permet de positionner la première partie du cercle en haut.

Le code peut être structuré pour créer des secteurs successifs, par exemple pour représenter des graphiques circulaires, en parcourant des tableaux de données et de couleurs.

CANVAS JS Ep1: dessiner carré, ligne, cercle

Exemple : Graphique Circulaire

Lors de la création de graphiques circulaires, la trigonométrie peut être utilisée pour positionner les libellés au centre de chaque part. Si les quartiers sont trop petits, les libellés peuvent être omis pour éviter l'illisibilité.

Un pourcentage inférieur à 1/20ème de la distribution totale peut rendre le libellé peu lisible. Dans de tels cas, un graphique en barres pourrait être plus approprié.

Une démonstration de ces algorithmes est disponible via un générateur de graphiques circulaires en ligne.

tags: #canvas #faire #apparaitre #un #cercle #au