Manuale di riferimento HTML

Completo elenco dei tag HTML

Attributo width del canvas HTML

L'attributo width specifica la larghezza dell'elemento <canvas> in pixel, utilizza l'attributo width per specificare la larghezza dell'elemento <canvas> in pixel.

HTML <canvas> etichetta

Esempio online

Elemento <canvas> di 200 pixel di altezza e larghezza:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base all'uso dell'attributo width del canvas HTML5 - (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Il tuo browser non supporta l'etichetta HTML5 canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>

Testa e vedi ‹/›

Compatibilità dei browser

IEFirefoxOperaChromeSafari

Tutti i browser principali supportano l'attributo width.

Attenzione: Internet Explorer 8 e versioni precedenti non supportano il tag <canvas>.

Definizione e uso

L'attributo width specifica la larghezza dell'elemento <canvas> in pixel.

Suggerimento: Utilizza l'attributo width per specificare la larghezza dell'elemento <canvas> in pixel.

Suggerimento: Ogni volta che l'altezza o la larghezza del canvas vengono reimpostate, il contenuto del canvas viene svuotato (vedi l'esempio in fondo alla pagina).

Suggerimento: Visita la nostra HTML Canvas Scopri di più su <canvas> nel nostro tutorial.

Differenze tra HTML 4.01 e HTML 5

<canvas> è un nuovo tag HTML5.

Sintassi

<canvas width="pixels">

Valore dell'attributo

Valore	Descrizione
pixels	Specificare l'attributo width del canvas in pixel (ad esempio "100"). Il valore predefinito di width è "300"

Più esempi

Pulisci il canvas impostando l'attributo width o height (utilizzando JavaScript):

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base all'uso dell'attributo width del canvas HTML5 - (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Il tuo browser non supporta l'etichetta HTML5 canvas.
</canvas>
<br>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50, 50, 100, 100);
funzione clearCanvas() {
　　c.height = 300;
}
</script>
<button onclick="clearCanvas()">Pulisci canvas</button>
</body>
</html>

Testa e vedi ‹/›

HTML <canvas> etichetta

HTML: <template> etichetta