Dessiner sur des canvas

Exercice 1 - Horloge

1. Recopiez la page Web exo1.html.
   Que se passe-t-il lorsqu'on la visualise ?
   Note: regardez la console !
   Expliquez ce que font window.onload = loaded puis window.setTimeout(refresh, 1000) ? Pour cela, cherchez dans la documentation sur le Mozilla Developer Network.
2. Il existe un appel window.setInterval() qui va appeler la fonction prise 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. Dans la fonction flèche associée à window.onload, récupérez le canvas à partir de son id et récupérez le contexte associé.
   Passez le canvas et le contexte en paramètre de la fonction refresh et dans refresh affichez sur la console la largeur (width) et la hauteur (height) du canvas.
   Enfin, modifiez la fonction refresh 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 à 85% de la moitié du minimum entre la largeur (canvas.width) et la hauteur canvas.height du canvas (il existe une fonction Math.min). 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.
   Note: dans un canvas, l'axe des y est orienté vers le bas, et on considère que l'angle 0 correspond à midi (12 heures), en tournant dans le sens des aiguilles d'une montre.
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 Red et le cadre en Teal.
   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 Cobalt.
   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% de la longueur de l'aiguille des minutes), mais plus large, toujours en essayant de 'factoriser' le code.
11. Ajoutez 12 traits de graduation ('ticks') en Emerald, le long du cadre de l'horloge. Un trait aura une longueur égale à 8% du rayon et sera tracé vers l'intérieur du cercle, à partir du cadre.

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 ne sont pas les mêmes, prenez la valeur minimum entre les deux et laissez des bandes de chaque côté.
   Attention : toutes les dimensions de l'horloge (épaisseur des traits, longueur des graduations et des aiguilles) doivent être proportionnelles au rayon, et pas seulement le cadre.
2. Faites en sorte d'avoir une fonction startClock qui prend en paramètre l'id d'un canvas et qui sert de point d'entrée unique 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, c'est-à-dire que toutes les horloges soient redessinées au même instant (et non pas simplement qu'elles affichent la même heure).