Bonjour à tous,

Cette semaine, je vais vous présenter un outil innovant venu avec la dernière version HTML ! Il s’agit de la balise “canvas”.

http://images.sixrevisions.com/2010/10/03-01_html5_canvas_element_ld_img.pngCliquez sur l’image pour visualiser le Wikipédia concernant canvas

 

C’est quoi ?

Il s’agit tout simplement d’une balise employée au sein de la technologie HTML5 qui permet la conception d’une zone de dessin. En effet, il s’agit tout d’abord de créer une zone de dessin (un carrer de 200 px par exemple) puis ensuite de définir nos points ne JavaScript. Chaque point finira par créer une forme. Un cercle, un carré … Et cet outil est tellement puissant qu’il permet d’écrire du texte, de concevoir des formes poussées comme des bonhommes, des cartes. Certains l’utilisent même pour concevoir leur petit jeu sur navigateur !

 

Comment ça marche ?

En essayant de ne pas trop rentrer dans le détail car il s’agit tout d’abord d’un article de présentation et non de pratique. La balise se déclare en HTML et fonctionne sur les navigateurs les plus courants. Ensuite vient la précision de la zone de travail (200 px sur 200 px par exemple). La zone étant créée, intervient maintenant le JavaScript. De nombreuses fonctions sont prêtes au cœur même de JavaScript permettant la conception de forme, des ronds rouges, des bordures de carrés bleus … Avec un peu d’expérience et de temps vous arriverez à faire de véritable œuvre d’art. Le gros avantage est l’interaction de ces éléments en JavaScript, permettant ainsi la mise en dynamique de toutes nos formes, la conception de condition, de boucle et d’automatisation.

 

Quelques exemples ?

Voici quelques exemples trouvés sur le WEB que j’ai trouvé relativement intéressant :

https://course.oc-static.com/ftp-tutos/cours/javascript/part5/chap3/an1.html (exemple trouvé sur OpenClassrooms)

https://course.oc-static.com/ftp-tutos/cours/javascript/part5/chap3/an1.html (exemple à nouveau trouvé sur OpenClassrooms)

Le jeu Crystal Galaxy (exemple trouvé sur http://www.xul.fr)

 

À vous maintenant de créer vos propres canvas et pourquoi ne pas les partager en commentaire ci-dessous ! Je vous souhaite en attendant, à tous, une bonne continuation,

Adam MARONGIO