Mafyou's blog - Proud to be human


by Mafyou

HTML5: Le Canvas


Bonjour! Aujourd'hui on va traiter d'HTML5. En tant que développeur, lisant les news tous les jours comme developpez.com, discutant avec les collègues ou encore faire des entretiens, il a toujours cette phrase en ce moment: "Rah le HTML5, il faut vraiment que l'on monte en compétences dessus, c'est puissant, joli et aussi, totalement cross-platform" Le hic étant que l'on connaît le HTML et l'envie de ré-apprendre ce langage dit, il y a quelques année "statique" et devenue totalement dynamique grâce à des balises comme "<footer>" ou "<svg>" et comme le titre de l'article nous l'indique le "<canvas>". Donc, c'est parti! Voyons ce que l'on peut faire 🙂 Alors, on va commencer par dessiner quelque chose... A choisir, on va dessiner un carré:

Alors, essayé de sauvegarder "l'image"... Pas possible? Normal! Ce n'est pas une image héhé =) Enfaite, c'est un canvas, c'est du HTML5, du lourd! Donc pour avoir ce rendu, il vous faut:

  1. Installer jQuery
  2. Coder un petite fonction attaquant votre canvas
  3. l'appeler dans la fonction "ready" de votre jQuery
  4. Entrez votre balise <canvas>
Alors, premier point:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
Deuxième:
entre des balises JS
function draw() { // On choppe l'id de notre canvas var canvas = document.getElementById('canvas'); // Puis on test de savoir si c'est possible de dessiner        if (canvas.getContext) { // On prend son context de dessin               var ctx = canvas.getContext('2d'); // Enfin, on dessine ctx.fillRect(0, 0, 100, 100); } } Troisième: Toujours entre des balises JS $(document).ready(function () { draw(); }); Et enfin, notre tant attendu, balise canvas: <canvas id="canvas" width="100" height="100"></canvas>

Je ne détail pas trop, ce code là n'a absolument rien de complexe 😉 On peut aussi très bien écrire du text avec: ctx.fillText("toto is a geek", 0, 500); Voilà de ce qui est statique. On va s'attaquer à la parti dynamique!   A vous de jouer 😉.