html5 tutorial : le canvas html5

 
by-nc-nd

On commence à parler beaucoup de HTML 5, je vous propose donc d’aborder une des nouveautés de ce langage qui est le canvas HTML 5. Je vous montre les bases de l’utilisation de cette nouvelle balise.

 

Prérequis

Disposer d’un navigateur récent. Les version des navigateurs Internet Explorer inférieures à la version 8 ne permettent pas l’utilisation des canvas.

 

HTML 5, c’est quoi ?

Evolution de la norme HTML, la spécification HTML 5 reste à ce jour en construction. Ce sont principalement les éditeurs de navigateurs qui, aujourd’hui, font évoluer cette norme par leur contribution, chaque éditeur faisant évoluer son navigateur avec les contributions de l’autre.

Parmi les contributeurs, nous pouvons citer Google avec Googe Chrome, Mozilla avec Firefox, ou encore Opéra avec son navigateur.

 

Un élément clé du HTML 5 : le canvas HTML 5

Cette nouvelle balise du HTML 5 est déjà implémentée dans la plupart des navigateurs tels que Firefox, Google Chrome, Opéra ou Safari.

Le Canvas définit une zone destinée à faire du graphisme 2D ou 3D.

En plus des attributs classiques tels que id ou style, cette balise comporte deux attributs destinés à en spécifier la taille:
width pour la largeur;
height pour la hauteur.

On peut représenter le canvas HTML 5 comme un plan orthonormé (au sens mathématique) dont l’origine (0,0) est le coin supérieur gauche :
– les coordonnées x (abscisses) augmentent de la gauche vers la droite;
– les coordonnées y (ordonnées) augmentent du haut vers le bas.

 

Le canvas HTML 5 en pratique

Vous allez créer un canvas d’une taille de 800 pixels (width) sur 600 pixels (height) auquel vous attribuez :
– un nom theCanvas par le biais de la balise id ;
– une bordure pour que l’on puisse en distinguer les limites via la balise style.

Créez un fichier HTML 5 que l’on nomme canvas.html, puis alimentez le avec le code suivant et sauvegardez:

<html>
  <body>
    <canvas id="theCanvas" width="800" height="600"  style="border: 1px solid #000000;">
      Votre navigateur ne supporte pas le Canvas HTML5
    </canvas>
  </body>
</html>

Si vous ouvrez le fichier canvas.html avec un navigateur, vous constaterez :
– une page blanche si votre navigateur supporte le canvas HTML 5
– le message « Votre navigateur ne supporte pas le canvas HTML 5 » si votre navigateur ne supporte pas le HTML5

Faites l’essai avec Firefox ou Google Chrome, puis avec Internet Explorer version 7 ou 8:

chrome Canvas

Canvas sous Google Chrome

IE9 Canvas

Canvas sous Internet Explorer 9

 

Un premier dessin dans le Canvas html5

Selon que vous vouliez afficher du graphisme 2D ou 3D, le canvas html5 met à votre disposition deux contextes 2D ou 3D.

Depuis javascript, vous allez d’abord récupérer votre canvas grâce à son identifiant id (canvas.html) par la commande getElementById :

document.getElementById('theCanvas');

Puis le contexte 2D qui nous intéresse par la commande canvas.html :

var context2D = document.getElementById('theCanvas').getContext('2d');

L’objet du contexte du canvas met à disposition du développeur toute une série de méthodes visant à dessiner dans ce même canvas html5.

Vous allez faire notre premier dessin qui va consister à faire un rectangle bleu dans le canvas.html. Reprenez le fichier canvas.html, que nous allons modifier en ce sens.

Le carré étant bleu, nous avons besoin de sélectionner la couleur bleue sur le contexte par le biais de la méthode strokeStyle, avant de le tracer. La couleur étant spécifiée sur la forme #XXXXXX, ici #0000FF pour la couleur bleue:

context2D.strokeStyle = "#0000FF";

L’objet de contexte a une méthode rect qui permet de tracer un rectangle. Cette méthode rect prend 4 paramètres :
– les 2 premiers sont les coordonnées x et y du coin supérieur gauche du rectangle;
– la troisième indique la longueur du rectangle (width);
– et le quatrième la largeur du rectangle (height).

context2D.rect(200, 200, 100, 25);

Enfin, il nous faut afficher le tracé dans le canvas via :

context2D.stroke();

En résumé :
[/javascript]
// définition de la couleur du tracé
context2D.strokeStyle = « #0000FF »;
// dessin du rectangle
context2D.rect(200, 200, 100, 25);
// affichage dans le canvas
context2D.stroke();

Encapsulez tout ça dans une fonction Javascript afficherRectangleBleu que vous appelez au chargement de la page, ce qui donne :

<html>
  <script>
    function afficherRectangleBleu() {
      var context2D = document.getElementById('theCanvas').getContext('2d') ;
      // définition de la couleur du tracé
      context2D.strokeStyle = "#0000FF";
      // dessin du rectangle
      context2D.rect(200, 200, 100, 25);
      // affichage dans le canvas
      context2D.stroke();
    }
    // appel de la fonction afficherRectangleBleu au chargement de la page
    window.onload = afficherRectangleBleu;
  </script>
  <body>
    <canvas id="theCanvas" width="800" height="600"  style="border: 1px solid #000000;">
       Votre navigateur ne supporte pas le Canvas HTML5
    </canvas>
  </body>
</html>

Dans le code source précédent, vous remarquerez une des nouveautés du HTML 5 qui est la suppression de la propriété type de la balise script souvent utilisée sous la forme :

<script type="text/javascript">....</script>

Elle devient :

<script>....</script>

Il était rare de rencontrer des scripts écrits dans un autre langage que le Javascript. HTML 5 a donc simplifié cet aspect en supprimant cette propriété.

Et vous obtenez :

Rectangle du Canvas

Dans le même style, il existe d’autres méthodes de dessin relatives au canvas HTML5 qui permettent entre autres de dessiner des cercles ou arcs de cercle, mais aussi de faire des transformations, ou encore d’afficher du texte ou des images. En bref, des choses suffisamment évoluées.

 

Si vous avez aimé cet article, partagez le.

 

Si vous constatez des coquilles, ou avez des remarques à faire ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.

 
[important]J’en ai terminé avec cette petite introduction au canvas HTML 5. Et vous que pensez vous d’HTML 5 ?[/important]
 
by-nc-nd

Posté dans html5Taggé canvas, canvas HTML5 propriété, canvas HTML5 propriétés, canvas propriété, canvas propriétés, faire des jeux, HTML, HTML 5, HTML 5 canvas, HTML games, HTML5, HTML5 canvas, html5 tutorial, Jeu HTML 5, Jeu HTML5, le canvas HTML 5, le canvas HTML5, tutoriel canvas  |  14 commentaires

14 réponses à "html5 tutorial : le canvas html5"

Répondre