Manuel de référence HTML

Complète liste des balises HTML

Balise HTML: <caption>Balise HTML: <button>

Balise HTML: <canvas>

Le tag <canvas> est un tag HTML5L'élément, utilisé pour dessiner2Le conteneur D et les images bitmap, etc., est utilisé pour dessiner des graphiques. Les graphiques réels dans ce conteneur sont dessinés avec le tag <script>. Ce tag est également appelé élément <canvas>.

Exemple en ligne

Afficher un carré bleu à l'aide de l'élément <canvas> :

Exemple

!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　canvas par fr.oldtoolbag.com</title>
</head>
<body>
<h1>Exemple de graphiques</h1>
<canvas id="w3codebox_com_canvas" width="125"height="125></canvas>
<script>
　　var canvas = document.getElementById("w3codebox_com_canvas");
　　var ctx = canvas.getContext("2d");
　　ctx.fillStyle = "#4B6692";
　　ctx.fillRect(25,　25,　100,　100);
　　ctx.clearRect(45,　45,　60,　60);
　　ctx.strokeRect(50,　50,　50,　50);
</script>
</body>
</html>

Voyons un test ‹/›

Dans ce HTML5Dans l'exemple de document, nous avons utilisé le tag <canvas> pour créer un conteneur de taille125px x 125px et ID de conteneur w3codebox_com_canvas.<script> est utilisé pour dessiner des graphiques dans ce conteneur. Dans cet exemple, nous avons dessiné un carré bleu avec une pente interne.

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

IE 9、Firefox、Opera、Chrome et Safari prennent en charge le tag <canvas>.

Remarque :IE 8 Les versions d'IE plus anciennes ne prennent pas en charge le tag <canvas>.

Définition et instructions d'utilisation du tag

Le tag <canvas> est utilisé pour dessiner des graphiques (comme des graphiques et d'autres images) via des scripts (généralement JavaScript).

La balise <canvas> est simplement un conteneur graphique, vous devez utiliser des scripts pour dessiner les graphiques.

L'élément <canvas> HTML est situé à l'intérieur de la balise <body>.
La balise <canvas> joue le rôle de conteneur graphique. Toutes les图形 doivent être dessinées à l'extérieur de la balise <canvas> en utilisant les API de script canvas ou WebGL via la balise <script>

HTML 4.01 par rapport à HTML5différences

La balise <canvas> est une balise HTML5 nouvelles balises.

Astuces et注意事项

Remarque :Tous les textes dans l'élément <canvas> seront affichés dans les navigateurs qui ne prennent pas en charge <canvas>.

Astuce :Pour en savoir plus sur toutes les propriétés et méthodes de l'objet canvas, veuillez consulterManuel de référence HTML canevas.

Attribut

New　: HTML5 nouvelles propriétés.

Attribut	Valeur	Description
heightHTML5	pixels	Définir la hauteur du canevas.
widthHTML5	pixels	Définir la largeur du canevas.

Attributs globaux

Prise en charge de la balise <canvas> Attributs globaux HTML.

Attributs d'événement

Prise en charge de la balise <canvas> Attributs d'événement HTML.

Balise HTML: <caption>Balise HTML: <button>