Site de Grégory Corgié

Présenter comme le grand ennemi de Flash qui doit faire trembler Adobe, on voit de nombreux exemples en HTML5 assez intéressants ( en particulier quake II complètement en 3D ).
Etant devenu assez familier avec Flash et son ActionScript, j'aimerai me faire mon avis à travers une petite série de tutoriaux sur la partie rendu du html 5.

La base du rendu, le canevas

Définition de l'élément côté HTML

Le canevas désigne une zone dans laquelle on va faire notre rendu. Cet objet dispose des propriétés classiques des objets html et peut être disposé un peu comme on veut sur la page.Le canevas se déclare entre les balises BODY de la page html, de cette manière par exemple:

<canvas id="myCanvas" width ="480" height="480"> </canvas>

Ici on déclare un canevas que l'on pourra retrouver par l'identifiant myCanvas et qui définit une zone de 480 pixels par 480 pixels.

Manipulation de l'élément en Javascript

Ne connaissant pas du tout le Javascript, j'ai dû aller voir à droite à gauche sur le net pour trouver ce que je voulais, ce n'est certainement pas optimal, mais ça on verra plus tard... On va dessiner un petit carré bleu dans un canevas avec le petit bout de code Javascript suivant

<script type="text/javascript">

function myFirstBlueQuad()
{
  // Get the canvas element.
  var elem = document.getElementById('myCanvas');
  if (!elem || !elem.getContext) 
  {
    alert( " myCanvas has not been found " );
    return;
  }

  // Get the canvas 2d context.
  var context = elem.getContext('2d');
  if (!context)
  {
    alert( " 2d context has not been found " );
    return;
  }
	
  // Now you are done! Let's draw a blue rectangle.
  context.fillStyle = '#00f';
  context.fillRect(100, 100, 200, 200);
}

window.onload =myFirstBlueQuad();

</script>

• On définit la fonction myFirstBlueQuad() qui sera exécutée lorsque la page sera entièrement chargée ( attachement fait dans le window.onload )
• Dans cette fonction, on va commencer par chercher le canevas via son identifiant 'myCanvas'et en particulier la partie 2D.
• Il ne reste plus qu'à dessiner le rectangle. On définit le style de remplissage comme étant un remplissage bleu ( couleur Red Green Blue ) qui servira à dessiner un rectangle à la position ( 100, 100 ) , de largeur de 200 pixels et de hauteur de 200 pixels.

Le résultat

Certes, rien d'impressionnant pour le moment !