Balise HTML <canvas>
La balise <canvas> fait partie des éléments HTML5. Elle définit une zone sur la page web où nous pouvons créer différents objets, images, animations et compositions photo via des scripts (généralement JavaScript). Vous devez utiliser un script pour dessiner des graphiques, car la balise <canvas> n'est qu'un conteneur pour les graphiques.
Lors de l'utilisation du canvas, il est important de distinguer des concepts tels que l'élément canvas et le contexte d'un élément, qui sont souvent confondus. Cet élément est intégré au HTML (le nœud DOM). Un contexte de canvas est un objet avec ses propriétés et méthodes pour le rendu. Le contexte peut être 2D ou 3D. L'élément canvas ne peut avoir qu'un seul contexte.
Un contenu alternatif doit être fourni à l'intérieur de la balise <canvas> afin que les anciens navigateurs ne supportant pas le canvas et les navigateurs avec JavaScript désactivé puissent afficher ce contenu.
Par défaut, un élément <canvas> a une taille de 300x150 pixels.
Vous pouvez utiliser CSS pour modifier la taille affichée du canvas, mais il est préférable de spécifier les dimensions en définissant les attributs width et height sur <canvas>, soit directement en HTML, soit via JavaScript.
Syntaxe
La balise <canvas> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<canvas>) et de fermeture (</canvas>).
Exemple de la balise HTML <canvas> :
Exemple de la balise HTML canvas | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
<script>
var c=document.getElementById('canvasExample');
var ctx=c.getContext('2d');
ctx.fillStyle='#1c87c9';
ctx.fillRect(10,50,80,80);
</script>
</body>
</html>Résultat
Exemple de la balise HTML <canvas> utilisée pour du texte :
Balise HTML <canvas> | Exemple de Canvas | W3Docs
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
</body>
</html>Exemple de la balise HTML <canvas> utilisée pour tracer une ligne :
Exemple de la balise HTML <canvas> pour tracer une ligne :
<!DOCTYPE html>
<html>
<body>
<canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("canvasExample");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.strokeStyle='#1c87c9';
ctx.stroke();
</script>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
height | pixels | Définit la hauteur de l'élément en pixels. |
width | pixels | Définit la largeur de l'élément en pixels. |
La balise <canvas> prend en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quelles sont les caractéristiques et les utilisations de la balise HTML <canvas> ?