Dessiner sur des canvas

Exercice 1 - Horloge

1. Recopiez la page Web exo1.html.
   Que se passe-t-il lorsque l'on la visualise ?
   Note: regardez la console !
   Expliquez ce que fait window.onload = loaded puis window.setTimeout(refresh, 1000) ? Pour cela, chercher dans la documentation sur le Mozilla Developer Network.
2. 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().
3. 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.
4. Retirez les commentaires autour du code en bas du fichier et bouger le code dans la fonction loaded. Que fait ce code ?
   Modifiez-le pour afficher une aiguille indiquant midi (ou 0 minute, ou 0 seconde).
5. Dessinez un cercle de rayon radius pixels centré dans le canvas, avec radius égal à 80% du minimum entre la largeur (canvas.width) et la hauter canvas.height du canvas. Il servira de cadre à notre horloge.
6. 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.
7. 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.
8. Modifiez votre code pour afficher la trotteuse en rouge et le cadre en bleu clair.
   Réglez à 3 pixels l'épaisseur du trait du cadre.
9. Affichez en plus de la trotteuse, l'aiguille des minutes (la grande aiguille) en noire.
   Note: pitié, ne dupliquez pas le code !
10. Ajoutez l'aiguille des heures, qui doit être d'une longueur inférieure aux deux autres aiguilles (disons 80%), mais plus large, toujours en essayant de 'factoriser' le code.
11. Ajoutez 12 traits de graduation ('ticks') en bleue foncé, autour du cadre de l'horloge. Un trait aura une longueur de 3 pixels.

Exercice 2 - Horloges de différentes tailles

1. 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é.
2. 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 !).
3. 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).