Manuel de référence HTML

Tous les balises HTML

Attribut width de HTML canvas

L'attribut width spécifie la largeur de l'élément <canvas> en pixels, utilisez l'attribut width pour spécifier la largeur de l'élément <canvas> en pixels.

HTML <canvas> balise

Exemples en ligne

Largeur et hauteur de2élément <canvas> de 00 pixels :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilisation de l'attribut width dans HTML & canvas-基础教程(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 et test ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

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

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

Définition et utilisation

L'attribut width spécifie la largeur 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 la hauteur ou la largeur du canevas est réinitialisée, le contenu du canevas est effacé (voir l'exemple en bas de page).

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

HTML 4.01 par rapport à HTML 5 différences

<canvas> est une balise HTML5 contient une nouvelle balise.

Syntaxe

<canvas width="pixels">

Valeur de l'attribut

Valeur	Description
pixels	Définissez la largeur du canvas en pixels (par exemple "100) La valeur par défaut de width est "300"

Plus d'exemples

Pour effacer le canevas, configurez les attributs width ou height (en utilisant JavaScript) :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilisation de l'attribut width dans HTML & canvas-基础教程(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 et test ‹/›

HTML <canvas> balise

HTML: <template> balise