TP : Canvas

Mise en place

Rendez-vous sur : https://codesandbox.io/s/1z091883q4

Une fois sur la page, commencez par vous connecter avec votre compte Github. Cette étape est optionnelle, mais vous assurera de ne pas perdre votre travail.

Une fois connecté, vous pouvez modifiez les fichiers. Lorsque vous sauvegarderez (CTRL+S), un message apparaîtra en bas à gauche, vous indiquant que la sandbox a été forkée. Noté que l'URL de la page a changé. C'est cette URL que je vous demanderai de me fournir pour rendre ce TP.

Exercice 1

Envoyez-moi par e-mail le lien de votre fork avant de commencer cet exercice.

Dans le fichier index.html, ajoutez un canvas de 580px par 400px. A l'aide de JavaScript, essayez de reproduire au mieux la scène suivante (n'importez pas une image 😎) :

Exercice 2

Créez un deuxième canvas, de la taille de votre choix. Le but de cet exercice est de rendre plus interactif l'utilisation des canvas dans le navigateur, et de persister un dessin fait dans ce dernier.

Dessinez en cliquant

Récupérez les coordonnées du curseur lors d'un clic dans le canvas. Dessinez un cercle à cette position (rayon et couleur aléatoire).

Sauvegardez le dessin

Une fois le cercle dessiné, enregistrez sa position et ses paramètres (rayon et couleur) dans le navigateur. A cette étape, un rafraîchissement de la page videra le canvas, mais les données devront être stockées.

Chargez le dessin

Récupérez les données préalablement stockées pour affichez les cercles stockées. A cette étape, un rafraîchissement de la page déclenchera le chargement et l'affichage des cercles stockées.

Réinitialisez le dessin

Ajoutez un bouton qui permettra de réinitialiser le dessin. Un clic sur ce bouton effacera le contenu du canvas.

BONUS : Gérez plusieurs dessins !

Ajoutez les éléments nécessaires à la gestion de plusieurs dessins. Par exemple :

• Une zone pour saisir le nom d'un dessin

• Un bouton pour enregistrer un dessin

• Une liste de tous les dessins

• ...

Exercice 3

Afficher le damier

L'objectif est d'afficher un damier de 10 cases par 10, similaire à celui-ci :

Commencez par créer un fichier ex3.js, et incluez-le dans votre index.html. Créez également un canvas carré, dans la longueur des côtés sera divisible par 10 (ex: 500*500px).

Le point rouge se déplace

Sur ce damier, un cercle rouge se déplacera de "5px" lors de l'appuie sur les flèches du clavier (dans la direction de la flèche.

Le point rouge change de taille

L'appuie sur le bouton (+) augmentera la taille du cercle de 1px, alors qu'un appuie sur le bouton (-) diminuera la taille du cercle de 1px.

Le point rouge ne pourra pas quitter le canvas

Faites les modifications nécessaires pour empêcher le cercle rouge de sortir du canvas.

BONUS : Le cercle Cyan

Ajoutez un cercle cyan, qui sera dirigé par les touches q,z,d,s. Veillez à ce que les deux cercles ne se superposent jamais. Les touches (+) et (-) agissent sur les deux cercles.

Corrections

https://codesandbox.io/s/k3yjqpwz0ocodesandbox.io

https://codesandbox.io/s/389o5rxqoqcodesandbox.io

https://codesandbox.io/s/ov9q50w8k9codesandbox.io