Introduction
Dans ce TP vous allez suivre un petit tutorial qui explique pas à pas comment écrire un programme de type "paint" en HTML5 + javascript. Il utilise le widget "canvas" de HTML5, qui permet de faire beaucoup de choses (vous le verrez en suivant les liens vers les démos et autres tutoriaux sur les canvas. On le présente comme un concurrent de flash...).
Vous avez le choix de l'éditeur pour les fichiers html et javascript, Netbeans est assez gros comme logiciel mais il supporte très bien la syntaxe HTML5 et javascript (avec auto-complétion, indentation automatique etc)
Travail à faire
Un peu de codage
- Rajouter de quoi dessiner un cercle,
- Rajouter de quoi choisir la couleur du dessin (aide : vous pouvez soit utiliser un menu, soit un canvas dans lequel vous dessinez des rectangles colorés, soit carrément, vous piquez le colorPicker widget de cet exemple, vous devrez un peu plonger dans les sources...). Google est votre ami !
Un peu de réflexion
- Vous devrez maintenant récupérer les évènements de dessin car nous allons plus tard les transférer sur le réseau (n'oubliez pas le fil rouge de ce cours : un pictionary multi-joueurs !), pour cela, vous ajouterez un gestionnaire d'événements sur la souris, et vous commencerez par écrire (en français) la description des dessins ("ligne droite dessinée entre (12,15) et (134, 145)", "cercle dessiné en (59, 37) de rayon 45", "dessin à main levé, path="(12, 16), (25, 45), (46, 67), etc...), ).
- Maintenant, vous stockerez ces événements de manière plus formelle sous la forme d'objets javascript (un array de points pour le dessin à main levé, etc.). Réflechissez à un format facilement transmissible sur le réseau et facilement décodable de chez le destinataire !