HTML5 Canvas - 2.1 Dessiner un échiquier avec des rectangles
Un échiquier est un bon exercice pour combiner rectangles et boucles sur Canvas. Cette leçon utilise deux nuances de marron et une boucle qui alterne les cases. Le résultat montre comment répéter un dessin simple.
Préparer les couleurs et le contour
Déclarez deux variables pour les couleurs : un marron clair pour les cases claires et un marron foncé pour les cases foncées. Le contour du plateau est défini en noir.
Une case se dessine avec un rectangle, dont on donne les coordonnées de départ, la largeur et la hauteur.
Alterner les cases avec une boucle
Une boucle dessine chaque case à côté de la précédente. Une case claire est suivie d'une case foncée, ce qui crée le motif d'un échiquier.
Enregistrez le fichier et rechargez la page : les cases alternent bien en ligne.
- Déclarer les deux couleurs marron
- Définir le contour noir
- Dessiner un rectangle
- Répéter le dessin dans une boucle
En résumé
Un échiquier se construit avec des rectangles de deux couleurs alternées. Une boucle place chaque case à côté de la précédente. Le même principe permet de répéter d'autres motifs.
Points clés
- Un échiquier alterne deux couleurs de cases.
- Un rectangle se définit par ses coordonnées, sa largeur et sa hauteur.
- Une boucle évite de répéter le même code pour chaque case.
- Le contour noir est un choix de présentation.
Questions fréquentes
Pourquoi utiliser une boucle ?
Une boucle évite de répéter le même code pour chaque case. Elle place les cases en suivant une règle simple.
Comment changer les couleurs ?
Modifiez les valeurs des deux variables de couleur. Le motif reste identique.
Le contour noir est-il obligatoire ?
Non, c'est un choix de style. La vidéo ajoute un contour noir au plateau.