Canvas (HTML5)

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.

Introduction

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/

Liens

• Dessiner avec Canvas