3 - Le Canvas HTML5

L'API du canvas HTML5 est simple (demo de http://acko.net/blog/js1k-demo-the-making-of/)

Non, c'est une blague ! C'est vraiment simple: exemple typique d'utilisation

<canvas id="myCanvas">Canvas not supported.</canvas>

<script type="text/javascript">
  var canvas=document.querySelector('#myCanvas1');
  var ctx=canvas.getContext('2d');
  ctx.fillStyle='#FF0000';
  ctx.fillRect(0,0,80,100);
</script>
    

Voir le source du code dans ce slide.

Le canvas HTML5 permet beaucoup de choses ! (monstre par Ronny Siebert)

Nombreuses features

• Reference sur le web : http://www.html5canvastutorials.com/
• Lignes, rectangles, arcs (ellipses), courbes quadriques et de bezier , chemins...
• Empiler des canvases comme des calques, ils sont transparents !
• Modes de dessin (XOR, etc.)
• Performance : accélération GPU sur la plupart des desktops, et quelques devices mobiles (ça arrive) ! Demonstration de paperJS.

Visualisation de données (Histogramme)

Un petit dernier pour la route...

Advanced techniques

Sauvegarder le contenu d'un canvas en tant qu'image dans un autre onglet,

Ecrire le contenu d'un canvas comme une image dans un fichier

Sauvegarder et restaurer le contexte graphique

Masking / Clipping

Transformations géométriques 2D.

Canvas et video

context.drawImage() peut prendre un autre canvas comme paramètre!

Mais aussi un autre élément video ! Demo!

Effets spéciaux utilisant cette techique : le mur TV

Effets spéciaux utilisant cette techique : video qui explose

Manipulation au niveau des pixels

// Create a pixel Array
var imageData = context.createImageData(width, height);
// Or grab canvas content as pixels
var imageData2 = context.getImageData(x, y, width, height);
// do something with the data
// modify canvas content
context.putImageData(imageData, 0, 0);
            

Good usage : la librairie JavaScript Pixtatic,

Canvas et animation, l'API requestAnimationFrame

Principe:

function mainLoop(timestamp) { // optional parameter
   // Draw something
   ...
   // Recall 60 times/s itself
   requestAnimationFrame(mainloop);
}
        

Demonstration, un petit moteur de jeu !

Et la 3D dans tout cela ? Deux librairies WebGL s'imposent...

BabylonJS (open source, Microsoft)

ThreeJS (open source, MrDoob)

Quelques monstres se plaignent...

Ils veulent aller voir les formulaires HTML5!