Objectifs
- Savoir dessiner sur une page web en utilisant HTML Canvas
- Réaliser des objets en 2D
- Comprendre les différentes façons de transformer et de manipuler des images
- Interagir avec le navigateur
Exercice 1: Découverte de HTML Canvas
Durée recommandée : 30 minutes maximum
- Comprenez ce que fait le fichier HTML exemple.html et le fichier JavaScript canvas.js
- Changez la couleur des lignes, de l’arc et des courbes
- Changez la taille du cercle
- Créez une ellipse
Exercice 2: Dessiner des objets en 2D
Durée recommandée : 30 minutes maximum
- Comprenez ce que fait le fichier HTML maison.html et le fichier maison.js
- Finissez la maison avec une porte et les fenêtres.
- Dessinez un arbre à côté de la maison.
Exercice 3 : Transformation et manipulation des images
Durée recommandée : 30 minutes maximum
- Comprenez ce que font les fichiers HTML image.html, couleur.html et les fichiers JavaScript image.js, couleur.js
- Modifiez le code pour que quand vous sélectionnez une couleur, les pixels de cette couleur dans l’image deviennent noirs.
Exercice 4 : Interaction
Durée recommandée : 1 heure maximum
- Comprenez ce que fait le fichier HTML tic_tac_toe.html et le fichier JavaScript tic_tac_toe.js
- Modifiez le code pour rendre accessible le jeu en utilisant les codes de la touche sur le clavier.
Exercice 5: C’est à vous !
Durée recommandée : 1h30 maximum
- Concevez et programmez un jeu vidéo en utilisant HTML Canvas.