Exemple
Dessinez un carré rouge, à la volée, et le montrer à l' intérieur du <canvas> élément:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Essayez - le vous - même » Définition et utilisation
Le <canvas> tag est utilisé pour dessiner des graphiques, à la volée, par l' intermédiaire de scripts (habituellement JavaScript).
Le <canvas> tag est seulement un conteneur pour les graphiques, vous devez utiliser un script pour dessiner effectivement les graphiques.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge totalement l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Différences entre HTML 4.01 et HTML5
Le <canvas> tag est nouvelle en HTML5.
Trucs et astuces
Remarque: Le texte à l' intérieur du <canvas> élément sera affiché dans les navigateurs qui ne prennent pas en charge <canvas> .
Astuce: En savoir plus sur le <canvas> élément dans notre Tutoriel HTML Canvas .
Astuce: Pour une référence complète de toutes les propriétés et les méthodes qui peuvent être utilisées avec l'objet de la toile, allez à notre HTML Canvas Référence .
Les attributs
= Nouveau en HTML5.
| Attribut | Valeur | La description |
|---|---|---|
| height | pixels | Indique la hauteur de la toile |
| width | pixels | Indique la largeur de la toile |
Attributs globaux
La <canvas> tag soutient également le attributs globaux en HTML .
Attributs de l'événement
La <canvas> tag soutient également l' événement Attributs en HTML .
Paramètres par défaut de CSS
Aucun.