Dessiner sur des Canvas

Exercice 1  On s'arrête et on réfléchit

En prévision du TP 8 qui sera noté, reprenez les TPs précédents, terminez-les si nécessaire, identifiez les points qui vous ont posé des problèmes et interrogez vos chargés de TPs à leur sujet.

Exercice 2 : Horloge

1. Recopiez la page Web exo2.html.
   Que se passe-t-il lorsque l'on la visualise ?
   Note : regardez la console !
   Expliquez ce que fait la commande window.onload = function() { ... };.
2. Que fait la fonction refresh ?
   Comment faire pour afficher un « tick » toutes les secondes en utilisant cette fonction ?
   Note : Il y aura sans doute un compteur à observer dans la console qui indiquera le nombre de 'tick !' affichés.
3. En fait, 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().
4. On souhaite afficher la date et l'heure au lieu des "tick !".
   Transformez le code pour afficher la date courante dans la console.
   On pourra ici créer un objet Date avec la commande new Date().
5. Changez encore le code pour afficher uniquement l'heure (méthode getHours() de la classe Date), les minutes (getMinutes()) et les secondes (getSeconds()) sur la console.

Dans les dernières questions, vous allez représenter pas à pas une horloge à aiguilles à l'aide d'un "canvas".

6. Retirez les commentaires avant l'appel de la fonction drawOnCanvas dans le gestionnaire d'événements onload.
   Que produit cette fonction ?
   
7. Après avoir repéré les dimensions du canvas, modifiez le code de la fonction drawOnCanvas pour afficher une aiguille indiquant midi (ou 0 minute, ou 0 seconde).
   Note : l'origine de l'aiguille doit être au centre du canvas.
8. Modifiez la fonction drawOnCanvas pour qu'elle affiche un cercle de rayon 220 pixels centré dans le canvas. Il servira de cadre à notre horloge.
   Faites en sorte que votre aiguille ne dépasse pas de ce cercle.
9. Déterminez 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.
   Ajoutez une fonction fromPolar recevant en paramètres :
   • les coordonnées 'xc' et 'yc' de l'origine de l'aiguille,
   • la longueur 'radius' de l'aiguille,
   • un nombre de secondes 's' correspondant à la position de l'aiguille.
   Cette fonction doit retourner la position (x,y) de l'extremité de l'aiguille.
   Testez votre fonction en modifiant la fonction refresh.
10. 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.

Exercice 3 : Horloge plus raffinée (optionnel)

1. Modifiez votre code pour afficher la trotteuse en rouge et le cadre en bleu.
   Réglez à 4 pixels l'épaisseur du trait du cadre.
2. Affichez en plus de la trotteuse, l'aiguille des minutes (la grande aiguille).
   Note : pitié, ne dupliquez pas le code !
3. 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.
4. Ajoutez 12 traits de graduation (« ticks ») autour du cadre de l'horloge. Un trait aura une longueur de 5 pixels, par exemple.

Exercice 4 : Horloges de différentes tailles (optionnel)

1. Faites en sorte que la taille de l'horloge puisse varier en fonction de la taille du canvas.
   Note : 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 égales, 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 !).