HTML5 : CANVAS
L'élément Canvas est un composant de HTML5 qui permet d'effectuer des rendus dynamiques d'images.
Je reproduis ici, un dessin qui ressemble beaucoup à ce que je faisais faire à mes élèves, dès le cours élémentaire, en 1987, grâce au basic du TO7.
Mais commençons par le commencement. Je faisais mesurer les coordonnées.
-
 Voici comment je procédais
Je rassure le ministre de l'éducation nationale. Apprendre le langage HTML n'a rien d'abrutissant. Un instituteur n'enseignera pas l'informatique à l'école primaire comme un professeur d'école d'ingénieurs.
Je l'ai fait en CE2 en 1997. Dix minutes pour expliquer ce qu'est une balise ; ensuite, création de pages en utilisant un éditeur.
Mes sites Internet sont toujours écrits à l'aide du logiciel qui m'avait servi.
Vous pouvez le télécharger ici. editeur.zip
Il suffira de le décompresser dans un répertoire. Créé sous Windows 95, il fonctionne encore sous Windows 8. Evidemment, je ne fais pas marcher le commerce. Il est gratuit. Il est aussi simple à utiliser qu'un traitement de texte. Et en plus, les enfants ne s'ennuieront pas.
Avec le progrès, la haute définition graphique, la taille des pixels a été fortement réduite depuis 1987. Les images sont donc plus petites. Mais on peut les agrandir.
Pour obtenir les nouvelles coordonnées, on doit les multiplier, par 2, 4,...etc.... Exercice de calcul rapide intéressant. Mais, bien sûr, il est possible de programmer l'ordinateur. Je le réalise ci-dessous par PHP.
- Fichier source du programme PHP
En fait, canvas a tout prévu. Après avoir fait tous ces calculs, novice en HTML5, je me suis rendu compte que l'instruction : t1.scale(2,2) permet de redimensionner l'image.
La maison créée peut être sauvegardée au format PNG sous Firefox. (Clic droit de la souris: Enregistrer l'image sous...)
Cette maison est composée de 14 éléments (m1 ... m14). Ici, ce sont des lignes fermées où les couleurs sont définies en Anglais. Elles pourraient être définies autrement:
- m4.fillStyle = "orange";
- m4.fillStyle = "#FFA500";
- m4.fillStyle = "rgb(255,165,0)";
- m4.fillStyle = "rgba(255,165,0,1)";
Vous trouverez plus d'exemples à cette adresse :La table des couleurs
D'autres exemples
Jouons avec le Tangram
Ci-dessous, différentes figures. On pourrait demander à des enfants de construire une page HTML où ils dessineraient avec Canvas leur solution au problème posé. Un mot de passe serait exigé pour aller vérifier. Ici, ce mot de passe, c'est tg.
Mais avant de passer à l'abstraction, pour des enfants, il est important de manipuler.
Je recommande Le Tangram aux éditions Buissonnières écrit par Georges Boulestreau sur une idée de René Bounaïdja.
Plus d'informations à Wikipedia
On trouve sur Internet un très grand nombre de modèles. Vous pouvez créer les vôtres. Envoyez-les moi. Je les ajouterai à ma collection
Vous pouvez vous documenter sur Canvas à cette adresse.
Vous pouvez vous documenter sur HTML5 à cette adresse.
Automatisation de la saisie des coordonnées
Lorsque l'enfant aura bien compris comment procéder, qu'il aura assez manipulé, calculé,...
80 panneaux du code de la route
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Cliquez sur une image pour voir le panneau dans une meilleure définition |
Ces panneaux ont été constuits par Canvas. Utilisation de quadraticCurve , bezierCurve.
Code source accessible par clic du bouton droit hors de l'image.
Horloge créée sous canvas de HTML5
|
On peut, en général, avoir accès plus facilement au code source d'une page, en cliquant, avec le bouton droit de la souris, sur cette page. Puis en cliquant, bouton gauche, sur "Code source de la page".
« Lorsque tu fais quelque chose, sache que tu auras contre toi ceux qui voulaient faire la même chose, ceux qui voulaient faire le contraire et l'immense majorité de ceux qui ne voulaient rien faire. » (Confucius)
|
Voici comment je procédais