html5 dessiner avec l'élément canva

Ce tutorial décrit comment mettre en œuvre l'élément <canvas>
dans vos pages HTML
Les exemples fournis devrait vous donner quelques idées claires de ce que vous pouvez faire avec <canvas> et peuvent être utilisée pour commencer à construire vos propres implémentations.
L'élément <canvas> est utilisé pour dessiner des graphiques, à la volée, sur une page web.
Commençons par jeter un coup d'œil sur cet exemple pour avoir une aidé sur ce que nous réserve l’élément canvas.

Somaire

La baalise canvas

HTML5 cours tutorial

Exemple : Dessiner un cercle dégradé, un triangle rouge, un rectangle multi couleur et un texte multi couleur sur le canevas :

Sélectionner le code

  <!DOCTYPE html >
  <html>
  <head>
  <title>HTML5  l’élément Canvas</title>
  </head>
  <body>
  <canvas id="monCanvas" width="280" height="160"
  style="border:1px solid #c3c3c3;">
  Votre navigateur ne supporte pas l'élément &lt;canvas&gt;.
  </canvas>
  <script>
       var c=document.getElementById("monCanvas");
       var canvOK=1;
  try {c.getContext("2d");}
  catch (er) {canvOK=0;}
  if (canvOK==1)
              {
              var ctx=c.getContext("2d");
    ctx.beginPath(); // Filled triangle
    ctx.moveTo(180,20);
    ctx.lineTo(250,40);
    ctx.lineTo(140,100);
    ctx.fillStyle="#FF0000";
    ctx.fill();
  var grd=ctx.createRadialGradient(75,50,5,90,50,90);
  grd.addColorStop(0,"white");
  grd.addColorStop(1,"blue");
  ctx.fillStyle=grd;
  ctx.beginPath();
  ctx.arc(75,50,40,0,2*Math.PI);
  ctx.fill();
      var grd2=ctx.createLinearGradient(20,90,120,90);
      grd2.addColorStop(0,"black");
      grd2.addColorStop("0.3","magenta");
      grd2.addColorStop("0.5","blue");
      grd2.addColorStop("0.6","green");
      grd2.addColorStop("0.8","gold");
      grd2.addColorStop(1,"red");
      ctx.fillStyle=grd2;
      ctx.fillRect(20,105,100,50);
      ctx.font="30px Verdana";
      var grd2=ctx.createLinearGradient(140,20,240,90);
      grd2.addColorStop(0,"black");
      grd2.addColorStop("0.2","magenta");
      grd2.addColorStop("0.5","blue");
      grd2.addColorStop("0.6","green");
      grd2.addColorStop(1,"red");
      ctx.strokeStyle=grd2;
      ctx.strokeText("Un texte",140,130);
              }
  </script>
  </body>
  </html>

Qu’est ce que  <canvas> ?

L’élément  HTML5 <canvas> est utilisé pour dessiner des graphiques, à la volée, via un script (habituellement en JavaScript).

L'élément <canvas> est juste un container pour les graphiques. Vous devez utiliser un script pour réellement dessiner les graphiques.

L’élément <canvas> a plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, caractères et ajouter des images.

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prend en charge l'élément <canvas>.

Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas l'élément <canvas>.

Comment créer une zone de dessin en HTML5

Un canvas est une zone rectangulaire sur une page HTML, et il est spécifié avec l'élément <canvas>.

Remarque : Par défaut, l'élément <canvas> n’a aucune bordure et aucun contenu.

Le balisage ressemble à ceci :

<canvas id="monCanvas" width="200" height="100"></canvas>

C’est une balise double

Remarque : Toujours spécifier un attribut id (pour désigner un script) et un attribut width et height pour définir la taille du Canvas.

Astuce : Vous pouvez avoir plusieurs éléments <canvas> dans une page HTML.

Pour ajouter une bordure, utilisez l'attribut de style :

Exemple

Sélectionner le code

  <canvas id="monCanvas" width="200" height="100"
  style="border:1px solid #000000;">
  </canvas>

Dessiner sur le canevas avec JavaScript

Tout le dessin sur le Canvas doit se faire à l'intérieur d'un script JavaScript :

Exemple

Sélectionner le code

<script type="text/javascript">
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Explication de l’exemple :

Tout d'abord, trouvez l'élément <canvas> :

Sélectionner le code

 var c=document.getElementById("monCanvas")

Ensuite, appelez la méthode getContext() (vous devez passer la chaîne « 2d » à la méthode getContext()) :

Sélectionner le code

 var ctx=c.getContext("2d")

L'objet getContext("2d") est un objet intégré de HTML5, avec de nombreuses propriétés et méthodes permettant de dessiner des tracés, boîtes, cercles, textes, images et plus encore.

Les deux lignes suivantes dessinent un rectangle rouge :

Sélectionner le code

  ctx.fillStyle="#0000 FF "
  ctx.fillRect(0,0,150,75)

La propriété fillStyle peut être une couleur CSS, un dégradé ou un motif. La valeur par défaut fillStyle est #000000 (noir).

La méthode fillRect (x, y, largeur, hauteur) dessine un rectangle rempli avec le style de remplissage actuel.

Coordonnées du canvas

Le canvas est une grille à deux dimensions.

Le coin supérieur gauche du canvas a les coordonnées (0,0)

Par conséquent, la méthode fillRect() ci-dessus avait les paramètres (0,0,150,75).

Cela signifie : commencer au coin supérieur gauche (0,0) et dessiner un rectangle de 150 x 75 pixels.

Canvas - chemins

Pour dessiner des lignes droites sur un canvas, nous allons utiliser les deux méthodes suivantes :

moveTo (x, y) définit le point de départ de la ligne

lineTo (x, y) définit le point d'arrivée de la ligne

Afin de réellement tracer la ligne, nous devons utiliser une des méthodes "ink", comme stroke().

Exemple

Définir un point de départ en position (0,0) et un point d'arrivée en position (200 100). Utilisez ensuite la méthode stroke() pour réellement tracer la ligne :

JavaScript :

Sélectionner le code

  var c=document.getElementById("monCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(300,150);
  ctx.stroke();

Exemple : utilisation de l’élément canvas pour tracer un diagramme

Code HTML
 

Sélectionner le code

  <!DOCTYPE html >
  <html>
  <head>
  <title>HTML5  l’élément Canvas</title>
  </head>
  <body>
  <canvas id="monCanvas" width="180" height="130"
  style="border:1px solid #c3c3c3;">
  Votre navigateur ne supporte pas l'élément &lt;canvas&gt;.
  </canvas>
  <script type="application/x-javascript">
    var ctx =
  document.getElementById('monCanvas').getContext('2d');
    var img = new Image();
    img.src = 'http://www.oujood.com/html5/images/repere.png';
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
  </script>
  </body>
  </html>

Pour dessiner un cercle sur un canvas, nous allons utiliser la méthode suivante :

arc(x,y,r,Start,stop)

Pour réellement dessiner le cercle, nous devons utiliser une des méthodes "ink", comme stroke() ou fill().

Exemple

Créer un cercle avec la méthode arc() :

JavaScript :

Sélectionner le code

  var c=document.getElementById("monCanvas");
  var ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();

Canvas – dessiner un texte sur l’élément canvas

Pour dessiner du texte sur un canvas, la propriété et les méthodes les plus importantes sont :

font - définit les propriétés de police pour le texte

fillText (texte, x, y) - tirages "rempli" texte sur le Canvas

strokeText (texte, x, y) - dessine du texte sur le Canvas (sans remplissage)

À l'aide de fillText() :

Exemple

Écrire un texte rempli de 30px de taille et la police « Arial »  à l'aide de fillText() sur le Canvas:

JavaScript :

Sélectionner le code

  var c=document.getElementById("monCanvas");
  var ctx=c.getContext("2d");
  ctx.font="30px Arial";
  ctx.fillText("Hello World",10,50);

À l'aide de strokeText() :

Exemple Écrire un texte de 30px de taille et la police « Arial »   sans remplissage à l'aide de strokeText() sur le Canvas:

JavaScript :

Sélectionner le code

  var c=document.getElementById("monCanvas");
  var ctx=c.getContext("2d");
  ctx.font="30px Arial";
  ctx.strokeText("Hello World",10,50);

Canva - Les dégradés

Les dégradés peuvent servir pour remplir des rectangles, cercles, lignes, texte, etc..

Les Formes sur le Canvas ne se limitent pas aux couleurs unies.

Il existe deux différents types de dégradés :

createLinearGradient (x, y, x 1, y1) - crée un dégradé linéaire

createRadialGradient (x, y, r, x 1, y1, r1) - crée un dégradé radial/circulaire

Dès que nous aurons un objet dégradé, nous devons ajouter deux ou plusieurs taquets de couleur.

La méthode addColorStop() spécifie la couleur s'arrête et sa position le long du gradient. Postes dégradés peuvent se situer entre 0 à 1.

Pour utiliser le dégradé, définissez la propriété fillStyle ou strokeStyle sur le gradient et puis dessiner la forme, tels que du texte, un rectangle ou une ligne.

À l'aide de createLinearGradient() :

Exemple

Créer un dégradé linéaire. Remplir le rectangle avec le dégradé :

JavaScript :

Sélectionner le code

  var c=document.getElementById("monCanvas");
  var ctx=c.getContext("2d");
  // Create gradient
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");
  // Fill with gradient
  ctx.fillStyle=grd;
  ctx.fillRect(10,10,150,80);


 

À l'aide de createRadialGradient() :

Exemple

Créer un dégradé radial ou circulaire. Remplir le rectangle avec le dégradé :

JavaScript :

Sélectionner le code

  var c=document.getElementById("monCanvas");
  var ctx=c.getContext("2d");
  // Create gradient
  var grd=ctx.createRadialGradient(75,50,5,90,60,100);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");
  // Fill with gradient
  ctx.fillStyle=grd;
  ctx.fillRect(10,10,150,80);

Canvas - Images

Pour dessiner une image sur le Canvas, nous allons utiliser la méthode suivante :

drawImage (image, x, y)

Image à utiliser :

canva Image

Exemple

Dessinez l'image sur le Canvas :

Code html :

Sélectionner le code

  <!DOCTYPE html >
  <html>
  <head>
  <title>HTML5  l’élément Canvas</title>
  </head>
  <body>
  <canvas id="monCanvas" width="260" height="160"
  style="border:1px solid #c3c3c3;">
  Votre navigateur ne supporte pas l'élément &lt;canvas&gt;.
  </canvas>
  <script>
  var ctx = document.getElementById('monCanvas').getContext('2d');
    var img = new Image();
    img.src = 'http://www.oujood.com/html5/images/image007.jpg';
    img.onload = function(){
      ctx.drawImage(img,0,0);
    };
  </script>
  </body>
  </html>

Référence HTML Canvas

Pour une référence complète de toutes les propriétés et méthodes qui peuvent être utilisées avec l'objet Canvas (avec des exemples d'essai sur chaque propriété et méthode), allez à notre canvas référence.

Le <canvas> Tag HTML

Balise

Description

<canvas>

Utilisé pour dessiner des graphiques,  via un script (habituellement en JavaScript)

Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant