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

‚Äč