Canvas (HTML5)

Texte en gras

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Définition

Qu’est ce que <canvas> ?

L’élément <canvas> a été introduit avec HTML5 ; c’est une API (Application Programming Interface) lien permettant générer et d’animer des graphismes avec du code JavaScript. Un <canvas> correspond a un espace de pixels initialement transparent qui, armé de Javascript, permet de réaliser des graphismes, partant du simple tracé de courbe pour aller vers les animations en passant par les jeux vidéos. Schématiquement, l’élément « canvas> est donc un « conteneur » permettant de dessiner avec le « crayon » Javascript.

Canvas est un élément HTML qui sert de "planche" de dessin. Pour le moment il existe une bibliothèque JavaScript qui peut utiliser cet "endroit". Selon Wikipédia (Jan 2015), «L'élément canvas est un composant de HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts. Déjà implémenté dans certains navigateurs, il fait partie de la spécification HTML5.»

Pour utiliser Canvas il faut d'abord définir un élément et indiquer un taille (si possible):

<canvas id="dessin1" width="600" height="200">
Désolé votre navigateur ne peut pas afficher un dessin. Faites une mise à jour (message "fallback" .... à adapter à votre site)
</canvas>

Avec JavaScript, il est ensuite possible de dessiner dans la zone (exemple piqué de Wikipédia):

<script>
// on met la main sur la planche de dessin
  var exemple = document.getElementById('dessin1');
// on crée un contexte
  var contexte = exemple.getContext('2d');
  contexte.fillStyle = "rgba(0,0,255,0.5)";
  contexte.fillRect(30, 30, 50, 50);
</script>

Outils

Bibliothèques

• Il existe de nombreux bibliothèques qui sont basé sur Canevas

Outils Auteurs

• Creative Cloud Flash (l'outil Flash 2014 qui remplace CS6) permet de créer du code HTML5/JavaScript
  • Voir les exemples dans http://tecfa.unige.ch/guides/flash/cc-html5/

??? a garder ??

<script>

   btn.onclick = function() {
 
 var p1 = document.getElementById("p1");
 p1.innerHTML = "Le texte du premier paragraphe a été modifié par JavaScript";
  
 var p2 = document.getElementById("p2");
 var image = document.createElement("img");
 image.src = "http://lorempixel.com/200/200/abstract";
 p2.appendChild(image);


 var p3 = document.getElementById("p3");
 document.getElementsByTagName("body")[0].removeChild(p3);

 //4. On change la couleur du texte des paragraphes
 var pp = document.getElementsByTagName("p");
 for(var i = 0; i < pp.length; i++) {
   document.getElementsByTagName("p")[i].style.color = "#F00";
 }

• Dessiner avec Canvas