HTML <canvas> Tag
Exemple
Dessinez un rectangle rouge à la volée et affichez-le dans l'élément <canvas> :
<canvas id="myCanvas">
Votre navigateur ne prend pas en charge la balise canvas.
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La <canvas> balise est utilisée pour dessiner des graphiques à la volée via un script (généralement JavaScript).
La <canvas> balise est transparente et ne sert que de conteneur pour les graphiques ; vous devez utiliser un script pour dessiner réellement les graphiques.
Tout texte à l'intérieur de l'élément <canvas> sera affiché dans les navigateurs avec JavaScript désactivé et dans ceux qui ne prennent pas en charge <canvas> .
Conseils et Remarques
Conseil : En savoir plus sur l'élément <canvas> dans notre Tutoriel HTML Canvas .
Conseil : Pour une référence complète de toutes les propriétés et méthodes, veuillez visiter notre Référence HTML Canvas .
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| height | pixels | Spécifie la hauteur du canvas. La valeur par défaut est 150. |
| width | pixels | Spécifie la largeur du canvas. La valeur par défaut est 300. |
Attributs Globaux
La <canvas> balise prend également en charge les Attributs Globaux en HTML .
Attributs d'Événements
La <canvas> balise prend également en charge les Attributs d'Événements en HTML .
Plus d'Exemples
Exemple
Un autre exemple de <canvas> :
<canvas id="myCanvas">
Votre navigateur ne prend pas en charge la balise canvas.
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Activer la transparence
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script> Paramètres CSS par Défaut
La plupart des navigateurs afficheront l'élément <canvas> avec les valeurs par défaut suivantes :
Exemple
canvas {
height: 150px;
width: 300px;
}