Canvas HTML5

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

Qu'est-ce que le Canvas ?

L'élément canvas de HTML5 utilise JavaScript pour dessiner des images sur la page 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, sa largeur et sa 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 de dessin de chemins, de rectangles, de cercles, de caractères et d'ajout d'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, 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 canevas, en commençant par le coin supérieur gauche (0,0).

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

Exemple d'instance Canvas : Comprendre les coordonnées

Exemple : placez 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

Tracez une ligne en spécifiant le point de départ et de fin :

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

Tracez 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 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;">
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 liées

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

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