Formation HTML 5

Les canvas HTML 5

Historique

canvas a été introduit par Apple pour être utilisé dans WebKit pour des logiciels comme le navigateur Safari.
canvas a été adopté par les navigateurs utilisant Gecko (notamment Mozilla Firefox) et Opera.
Il a été ensuite standardisé par le groupe de travail WHATWG.
Novell a développé une extension activant les XForms dans Internet Explorer1 offrant ainsi une prise en charge des fonctionnalités de canvas.

Principe

L'élément canvas a été introduit afin de pouvoir créer des éléments graphiques 2D.
Il permet de mettre en place une zone pour les dessins ou les applications graphiques.
Les dimensions de la zone de dessin (hauteur et la largeur) sont définies dans le code HTML.
Du code Javascript permet d'accéder à l'aire via une série complète de fonctions de dessins permettant de générer dynamiquement des graphismes.
Un éditeur qui fonctionne entièrement sur canvas a été mis en place par Mozilla.

Quand ne pas utiliser `canvas`

Les dessins sont de type pixels, ils ne sont pas vectoriels.
Pour le dessin vectoriel il faut utiliser des images SVG.
Il est déconseillé d'utiliser canvas pour réaliser la structure d'une page (par exemple en-tête et pied de page).
Sur des pages déjà graphiquement chargées il sera préférable d'éviter d'utiliser canvas.

Quand utiliser `canvas`

canvas est approprié pour se substituer à des applets aujourd'hui réalisées en flash ou en java.
Des opérations sur des images (telle que mise en surbrillance de zones) qui étaient réalisées coté serveur peuvent se faire facilement par le client.
De part sa nature dynamique reposant la manipulation du DOM par javascript il est possible de réaliser des animations.
Grâce à sa nature interactive il est possible de réaliser des jeux.

Déclaration d'un `canvas`

La balise canvas est utilisée en lui précisant :
- la largeur en pixels de la zone d'affichage par l'attribut width=800.
- la hauteur en pixels de la zone d'affichage par l'attribut height=800.
- les attributs de style peuvent être indiqués.
Cette déclaration ne fera que présenter une zone rectangulaire de couleur unie.
Le dessin se fera par manipulation de l'objet correspondant.
Le contenu de la balise ne sera affiché que si le navigateur ne connaît pas canvas

Il sera judicieux de placer une image se substituant au canvas en cas de non support de cette balise par le navigateur.

Dessiner dans le `canvas`

pour atteindre l'objet il sera préférable de lui donner une identité par l'attribut id=mon_canvas.
L'objet sera alors accessible par le_canvas=getElementById('mon_canvas').
Pour pouvoir dessiner il faut récupérer un objet contexte de dessin par la méthode getContext() de l'objet canvas.
2 valeurs d'argument sont possibles :
- 2d pour le contexte bidimensionnel,
- 3d pour le contexte tridimensionnel (stade expérimental).
C'est sur ce contexte que seront appliquées les méthodes de dessin.

Dessiner dans le `canvas`

Pour dessiner il faut préciser les couleurs par les propriétés du contexte bidimensionnel :
- fillStyle définit la couleur de remplissage :
  - sous forme de 3 composantes rouge, vert, bleu rgb(0,128,255) (bleu clair).
  - sous forme de 4 composantes rouge, vert, bleu et transparence rgb(255,128,0, 0.5) (orange semi-transparent).
- strokeStyle définit la couleur de contour.
- lineWidth définit la largeur des lignes et contours.

Dessiner dans le `canvas`

Pour dessiner il faut appliquer les méthodes du contexte bidimensionnel :
- fillRect(ox,oy,w,h) dessine un rectangle plein utilisant la couleur donnée au contexte et le plaçant aux coordonnées ox, oy avec une largeur w et une hauteur h (exprimée en pixels).
- strokeRect(ox,oy,w,h) dessine un contour rectangulaire.
- clearRect(ox,oy,w,h) efface une zone rectangulaire.

Exemple de `canvas`

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <title>Dessiner un rectangle</title>
 </head>
 <body>
<canvas id="mon-canvas" width="400" height="400">
  <img src="mon_image.png" alt="pas de canvas"/>
</canvas>
<script type="text/javascript">
  var le_canvas = document.getElementById('mon-canvas');
  var le_contexte = le_canvas.getContext('2d');

                                    //gris semi-transparent
  le_contexte.fillStyle = "rgba(128,128,128,0.5)";
  le_contexte.strokeStyle = "rgb(255,255,255)";   //blanc

  le_contexte.fillRect(10, 5, 350, 350);
  le_contexte.strokeRect(10, 5, 350, 350);
</script>
</body>
</html>

Faire des polygones

Pour dessiner un polygone il faut :
- ouvrir un chemin avec beginPath(),
- se positionner en début de chemin avec moveTo(ox,oy),
- parcourir chaque branche du chemin avec lineTo(ox,oy),
- fermer et remplir le polygone avec fill(),
- éventuellement lui donner un contour avec stroke().

Faire des arcs de cercle

Pour dessiner un arc de cercle il faut :
- ouvrir un chemin avec beginPath(),
- parcourir le chemin avec arc(ox,oy,r,aD,aF) avec :
  - ox et oy coordonnées du centre en pixels,
  - aD et aF angle de début et de fin en radians.
- fermer et remplir le chemin avec fill(),

Agir sur des images

Pour charger une image il faut :
- créer un objet image avec image = new Image(),
- affecter un URL à cette image img.src = 'http://monsite.com/mon_image.jpg',
- dessiner l'image par la méthode drawImage(image,ox,oy).

Exemple :

<canvas id="cvs" width="800" height="600"/>
<script type="text/javascript">
  var ctx =
     document.getElementById('cvs).getContext('2d');
  var img = new Image();
  img.src = 'http://mon-site.com/mon-image.jpg;
  ctx.drawImage(img,0,0);
</script>

Pour conclure

Il est possible de faite des animations.
Pour cela on utilise la fonction javascript setInterval()
Il faut garder à l'esprit que canvas ne connaît que les pixels, mais...
Il est possible de sauvegarder un état par save() et de le rétablir par restore().
Il existe de nombreuses méthodes permettant de faciliter la réalisation d'effets...

Documentation

Exercices sur les canvas par Mozilla : https://developer.mozilla.org/en/Canvas_tutorial

Formation HTML 5

Les canvas HTML 5

Historique

Principe

Quand ne pas utiliser canvas

Quand utiliser canvas

Déclaration d'un canvas

Dessiner dans le canvas

Dessiner dans le canvas

Dessiner dans le canvas

Exemple de canvas

Faire des polygones

Faire des arcs de cercle

Agir sur des images

Pour conclure

Documentation

Quand ne pas utiliser `canvas`

Quand utiliser `canvas`

Déclaration d'un `canvas`

Dessiner dans le `canvas`

Dessiner dans le `canvas`

Dessiner dans le `canvas`

Exemple de `canvas`