Objectifs:

• Canvas HTML5
• Les fonctions du contexte graphique
• La création d'objets graphiques et affichage dans le contexte graphique
• Gestion simple d'évènements et écriture de callbacks

Exercice 1

• Si vous n'avez jamais utilisé le canvas, vous devez commencer par un tutorial de base comme celui-ci par exemple: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
• Contexte graphique, affichage d'objets et paramétrage des attributs graphiques de base: en utilisant un canvas, créer et afficher cette scène. NB: vous pouvez remplacer l'image par l'image de votre choix.

Exercice 2

Cet exercice consiste à réaliser un traceur très simple en utilisant les possibilités orientées objets de javascript et le canvas, et vous pouvez regarder en préalable un tutorial décrivant un traceur réalisé en javascript qui utilise le canvas.

Le traceur que vous allez réaliser se présente comme dans cette image et doit pouvoir tracer au moins trois fonctions: cos(x), sin(x) et x^2.

1. Pour commencer, créer un document HTML avec deux zones:
   • une zone de saisie/modification de la définition d'une fonction dont on veut tracer la courbe.
   • une zone de dessin pour mettre le canvas dans lequel est dessiné la courbe correspondant à la fonction saisie.
2. Créer une fonction qui prend comme argument le nom de fonction à tracer et qui affiche la courbe correspondante lorsque ce nom est cos(x), sin(x) ou x^2.
3. Faire en sorte que la fonction écrite soit appelée lorsque c'est nécessaire, c'est à dire à chaque nouveau nom de fonction saisi dans la boite de saisie suivi de 'enter'. NB: Vous trouverez quelques exemples simples de callbacks ici.
4. Faire en sorte qu'il soit possible d'effectuer un zoom selon l'axe des x à la molette.
5. Questions subsidiaire: Tracer davantage de fonctions sur le même canvas:
   Il s'agit d'ajouter des composants comme dans cet exemple pour permettre de saisir et d'afficher plus de fonctions.