Accueil    HTML    Balise Canvas
 



balise canvas  Balise CANVAS : Zone de dessin

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <canvas> représente une zone de dessin pouvant afficher des graphiques en utilisant l'API qui lui est associée et qui met à disposition de nombreuses méthodes accessibles en javascript pour la création de formes et d'effets.

Cette API est utilisable en javascript : une fois la balise <canvas> créée (en spécifiant un identifiant), on instancie un contexte associé à cet élément sur lequel on effectuera les appels à l'API :

<canvas id="exCanvas" height="200px" width="400px">
   Balise canvas non supportée ...
</canvas>

<script type="text/javascript">
//<![CDATA[

   var canvas = document.getElementById("exCanvas");
   var contexte = canvas.getContext("2d");

   // Manipulation sur le contexte ...

//]]>
</script>

Animation avec l'élément canvas : on déclare un timer appelant la fonction actualisant le contenu de la balise canvas. Le rendu de la courbe est obtenu avec la méthode "bezierCurveTo()" :

Balise canvas non supportée ...


Propriétés pour la balise canvas :




Propriétés Définition Valeurs
height Largeur de la zone visible du canvas px
width Hauteur de la zone visible du canvas px


Exemple d'utilisation de la balise canvas :




Création de dégradés avec la méthode "createLinearGradient()" :

<canvas id="exCanvas1" height="200px" width="400px" style="border:dotted 1px black;">
   Balise canvas non supportée ...
</canvas>

<script type="text/javascript">
//<![CDATA[
   var canvas=document.getElementById('exCanvas1');
   var ctx=canvas.getContext('2d');

   var grd1=ctx.createLinearGradient(0,0,200,0);
   grd1.addColorStop(0.3,'silver');
   grd1.addColorStop(0.9,'steelblue');
   ctx.fillStyle=grd1;
   ctx.fillRect(0,0,200,100);

   var grd2=ctx.createLinearGradient(0,0,0,100);
   grd2.addColorStop(0.3,'gold');
   grd2.addColorStop(0.7,'orange');
   ctx.fillStyle=grd2;
   ctx.fillRect(200,0,200,100);

   var grd3=ctx.createLinearGradient(0,100,0,200);
   grd3.addColorStop(0.1,'steelblue');
   grd3.addColorStop(0.9,'violet');
   ctx.fillStyle=grd3;
   ctx.fillRect(0,100,200,100);

   var grd4=ctx.createLinearGradient(200,100,400,200);
   grd4.addColorStop(0.1,'green');
   grd4.addColorStop(0.9,'yellow');
   ctx.fillStyle=grd4;
   ctx.fillRect(200,100,200,100);

//]]>
</script>



Création de dégradés avec la méthode "createLinearGradient()" :

Balise canvas non supportée ...

Création d'un gradient radial et ajout de texte avec les méthodes "createRadialGradient()" et "fillText()" :

Balise canvas non supportée ...