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 : 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 4: Visualisation: Javascript + SVG
Durée recommandée : 1h30 maximum
- Votre prochain exercice consiste à visualiser le fichier JSON constitué des données démographiques de France obtenues auprès de Wikidata et à le visualiser à l'aide d'un graphique linéaire utilisant HTML, Javascript et SVG. Vous ne pouvez utiliser aucune bibliothèque externe pour cet exercice.
- Votre dernier exercice consiste à intégrer cette carte du monde écrite en SVG dans votre projet de la manière suivante :
- Les utilisateurs peuvent voir les liens (et les images/vidéos) des villes sur cette carte du monde
- En cliquant sur le lien (ou l'image), l'utilisateur est dirigé vers la page web de votre choix
