Guide de référence HTML

Tous les balises HTML

Attribut height du canvas HTML

L'attribut height spécifie la hauteur de l'élément <canvas> en pixels. Chaque fois que vous redéfinissez la hauteur ou la largeur du canevas, le contenu du canevas est effacé.

HTML <canvas> balise

Exemples en ligne

Un élément <canvas> de hauteur et de largeur2élément <canvas> de 00 pixels :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilisation de l'attribut height de la balise <canvas> HTML-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px épais">
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
</script>
</body>
</html>

Vérification de test ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

Tous les navigateurs populaires prennent en charge l'attribut height.

Attention : Internet Explorer 8 et les versions d'IE plus anciennes ne prennent pas en charge la balise <canvas>.

Définition et utilisation

L'attribut height spécifie la hauteur de l'élément <canvas> en pixels.
Astuce : Utilisez l'attribut width pour spécifier la largeur de l'élément <canvas> en pixels.

Astuce : Chaque fois que vous redéfinissez la hauteur ou la largeur du canevas, le contenu du canevas est effacé (regardez l'exemple en bas de page).

Astuce : Veuillez consulter nos HTML Canvas Apprenez plus sur <canvas> dans les tutoriels HTML.

HTML 4.01 par rapport à HTML 5 différences

<canvas> est une balise HTML5 nouvelle balise.

Syntaxe

<canvas height="pixels">

Valeur de l'attribut

Valeur	Description
pixels	Définir la hauteur du canevas en pixels (par exemple "100px" ou simplement "100"). La valeur par défaut est "150"。

Plus d'exemples

Nettoyer le canevas en définissant les propriétés width ou height (en utilisant JavaScript) :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilisation de l'attribut width de la balise <canvas> HTML-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px épais">
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</canvas>
<br>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
function clearCanvas() {
　　c.height =　300;
}
</script>
<button onclick="clearCanvas()">Clear canvas</button>
</body>
</html>

Vérification de test ‹/›

HTML <canvas> balise

HTML: <template> balise