Canvas HTML5

L'élément canvas est utilisé pour dessiner des graphiques sur le web.

Qu'est-ce que le Canvas ?

L'élément canvas de HTML5 utilise JavaScript pour dessiner des images sur le web.

Le canvas est une zone rectangulaire, où vous pouvez contrôler chaque pixel.

Canvas possède de multiples méthodes de dessin de chemins, de rectangles, de cercles, de caractères et d'ajout d'images.

Créer un élément Canvas

Ajouter l'élément canvas à la page HTML5.

Définir l'ID de l'élément, la largeur et la hauteur :

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

Dessiner avec JavaScript

L'élément canvas lui-même n'a pas de capacité de dessin. Toutes les opérations de dessin doivent être effectuées à l'intérieur de JavaScript :

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

JavaScript utilise l'ID pour trouver l'élément canvas :

var c=document.getElementById("myCanvas");

Ensuite, créez l'objet context :

var cxt=c.getContext("2d");

L'objet getContext("2d") est un objet HTML5 intégré, qui dispose de diverses méthodes pour dessiner des chemins, des rectangles, des cercles, des caractères et ajouter des images.

Les deux lignes de code suivantes dessinent un rectangle rouge :

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

La méthode fillStyle le peint en rouge, et la méthode fillRect détermine la forme, la position et la taille.

Comprendre les coordonnées

La méthode fillRect de dessus a les paramètres (0,0,150,75).

Cela signifie : dessinez un rectangle de 150x75 sur le canvas, en commençant par le coin supérieur gauche (0,0).

Comme indiqué dans l'image suivante, les coordonnées X et Y du canvas sont utilisées pour localiser les dessins sur le canvas.

Exemple d'instance Canvas : Comprendre les coordonnées

Exemple : mettez le curseur sur le rectangle pour voir les coordonnées

Plus d'exemples Canvas

Voici d'autres exemples de dessin sur l'élément canvas :

Exemple - Ligne

Dessinez une ligne en spécifiant où commencer et où finir :

Exemple d'instance Canvas : Lignes

Code JavaScript :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

Élément canvas :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Votre navigateur ne prend pas en charge l'élément canvas.
</canvas>

Essayez-le vous-même

Exemple - Cercle

Dessinez un cercle en définissant la taille, la couleur et la position :

Exemple d'instance Canvas : Cercles

Code JavaScript :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

Élément canvas :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Votre navigateur ne prend pas en charge l'élément canvas.
</canvas>

Essayez-le vous-même

Exemple - Dégradé

Utilisez la couleur spécifiée pour dessiner un fond de dégradé :

Exemple d'instance Canvas : Dégradés

Code JavaScript :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

Élément canvas :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Votre navigateur ne prend pas en charge l'élément canvas.
</canvas>

Essayez-le vous-même

Exemple - Image

Placez une image sur le canvas :

Exemple d'instance Canvas : Images

Code JavaScript :

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

Élément canvas :

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"></canvas>
Votre navigateur ne prend pas en charge la balise HTML5 canvas.
</canvas>

Essayez-le vous-même

Tutoriel HTML Canvas

Pour en savoir plus sur le canvas, visitez notre Tutoriel HTML Canvas.

Pages associées

Manuel de référence :Balise <canvas> HTML 5

Manuel de référence :Objet Canvas DOM HTML