HTML5 - 1.2 Réaliser une ligne complexe sur le canevas

Dans la leçon précédente, le canevas affichait trois lignes simples. Ici, nous gardons la ligne bleue et supprimons les deux autres pour la transformer en ligne complexe. Une ligne complexe enchaîne plusieurs segments, comme un zigzag. Cette méthode évite d'écrire une commande complète pour chaque segment.

Préparer le canevas

Nous reprenons le code de la leçon précédente : la feuille de style, la page HTML et le script JavaScript. Les anciennes lignes sont supprimées pour laisser place au nouveau tracé.

Le trait reçoit d'abord la couleur bleue avec la propriété strokeStyle, puis une épaisseur de 2 pour rester bien visible. Ces réglages s'appliquent à tous les segments qui suivent.

contexte.strokeStyle = 'blue';
contexte.lineWidth = 2;

Tracer les premiers segments

Un segment se dessine à partir de son point de départ, avec ses coordonnées X et Y, puis de son point d'arrivée. Le schéma de la vidéo montre ce principe pour une seule ligne.

Pour une ligne complexe, on ne réécrit pas chaque segment. On enchaîne les points d'arrivée à la suite du premier point de départ, et chaque nouveau point prolonge le trait.

contexte.moveTo(<x-depart>, <y-depart>);
contexte.lineTo(<x-1>, <y-1>);
contexte.lineTo(<x-2>, <y-2>);
contexte.stroke();

Enchaîner les points du zigzag

Une fois la première ligne tracée, on ajoute les autres points de fin, en repartant des coordonnées du schéma. Ces points s'alignent ensuite les uns après les autres pour former le zigzag.

Après la sauvegarde, on lance le serveur et on ouvre la page. Le résultat affiche une ligne bleue complète, qui correspond au schéma montré dans la vidéo.

En résumé

Une ligne complexe se construit en enchaînant des points. On définit le point de départ avec moveTo, puis on ajoute les points d'arrivée avec lineTo. Le trait se dessine enfin avec stroke. Cette méthode permet de tracer un zigzag sans répéter le code de chaque segment.

Points clés

• Une ligne complexe enchaîne plusieurs segments dans un seul tracé.
• moveTo fixe le point de départ, et lineTo ajoute les points suivants.
• La couleur bleue et l'épaisseur 2 se règlent avant le tracé.
• stroke affiche le trait sur le canevas.
• Un schéma avec les coordonnées facilite la construction du zigzag.

Questions fréquentes

Pourquoi ne pas écrire une ligne pour chaque segment ?

Chaque segment demanderait beaucoup de lignes de code. En enchaînant les points, un seul tracé suffit pour tout le zigzag.

Comment savoir quelles coordonnées utiliser ?

Elles viennent du schéma présenté dans la vidéo. Vous pouvez ajuster les valeurs X et Y, puis vérifier le résultat dans la page.

Faut-il supprimer les anciennes lignes ?

Oui. Dans la vidéo, la ligne jaune et la ligne rouge sont supprimées pour ne garder que le tracé bleu.