3 - Le Canvas HTML5

Michel Buffa
Juin 2016

buffa@unice.fr

Dessin, animation, jeux... l'élément <canvas> !

Dessin, animation, jeux... l'élément <canvas> !

JS Bin

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>
    
Your browser does not support the canvas tag.

Voir le source du code dans ce slide.

Un petit dernier pour la route...

JS Bin

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,

Quelques monstres se plaignent...