:: Enseignements :: ESIPE :: E3INFO :: 2018-2019 :: Programmation Web avec JavaScript ::

Dessiner sur des canvas

Comme pour les TPs précédents, on vous demande de créer le rapport du TP3 dans un fichier compte-rendu-tp3.html. Contrairement au compte rendu des TPs précédents, le TP consiste à éditer les fichiers exo1.html et exo2.html.

Exercice 1 - Horloge

Le but de cet exercice est d'utiliser l'API des canvas en réalisant une horloge à aiguilles.

Recopiez la page Web exo1.html.
Que se passe-t-il lorsque l'on la visualise ?
Note: regardez la console !
Expliquez ce que fait la balise <body onload="loaded()">.
Comment faire pour afficher un "tick" toutes les secondes en utilisant setTimeout ?
En fait, il existe un appel window.setInterval() qui va appeler la fonction pris en paramètre de façon répétée. Transformez le code pour utiliser window.setInterval().
Transformez le code pour afficher la date courante avec new Date().
Puis changez encore le code pour afficher l'heure (getHours()), les minutes (getMinutes()) et les secondes (getSeconds()) sur la console.
Retirez les commentaires autour du code en bas du fichier. Que fait ce code ?
Modifiez-le pour afficher une aiguille indiquant midi (ou 0 minute, ou 0 seconde).
Dessinez un cercle de rayon 220 pixels centré dans le canvas. Il servira de cadre à notre horloge.
Indiquez les formules mathématiques qui permettent pour une valeur de 0 à 60 secondes de trouver les coordonnées x et y du sommet de l'aiguille.
Modifiez le code pour faire bouger la trotteuse (nom de l'aiguille des secondes) en fonction des secondes.
Note: context.clearRect(...) permet d'effacer le canvas.
Modifiez votre code pour afficher la trotteuse en rouge et le cadre en bleu.
Réglez à 2 pixels l'épaisseur du trait du cadre.
Affichez en plus de la trotteuse, l'aiguille des minutes (la grande aiguille).
Note: pitié, ne dupliquez pas le code !
Ajoutez l'aiguille des heures, qui doit être d'une longueur inférieure aux deux autres aiguilles (disons 70%), mais plus large, toujours en essayant de 'factoriser' le code.
Ajoutez 24 traits de graduation ('ticks'), autour du cadre de l'horloge. Un trait aura une longueur de 4 pixels, par exemple.

Exercice 2 - Horloges de différentes tailles

On veut faire en sorte d'avoir plusieurs horloges de différentes tailles sur une même page.
On utilisera pour cela la page Web exo2.html.

Faites en sorte que la taille de l'horloge puisse varier en fonction de la taille du canvas
Un canvas a une propriété width et une propriété height.
Dans le cas où la largeur et la hauteur d'un canvas n'est pas la même, prenez la valeur minimum entre les deux et laisser des bandes de chaque coté.
Faites en sorte d'avoir une fonction startClock qui prend en paramètre l'id d'un canvas qui sert d'unique point d'entrée pour faire fonctionner une horloge.
Testez avec l'affichage des 2 horloges de tailles différentes (on est d'accord, on peut en ajouter plus !).
Question top moumoute, faites en sorte de garantir que les aiguilles des différentes horloges soient synchrones (i.e. misent à jour toutes en même temps).