TP : Canvas
Last updated
Last updated
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.
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 😎) :
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.
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).
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.
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.
Ajoutez un bouton qui permettra de réinitialiser le dessin. Un clic sur ce bouton effacera le contenu du canvas.
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
...
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).
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.
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.
Faites les modifications nécessaires pour empêcher le cercle rouge de sortir du canvas.
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.
