Tag HTML <tela>
Esempio
Disegna al volo un rettangolo rosso e mostralo all'interno dell'elemento <canvas>:
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
Il <canvas>tag viene utilizzato per disegnare grafici, al volo, tramite script (solitamente JavaScript).
Il <canvas>tag è trasparente ed è solo un contenitore per la grafica, è necessario utilizzare uno script per disegnare effettivamente la grafica.
Qualsiasi testo all'interno <canvas>dell'elemento verrà visualizzato nei browser con JavaScript disabilitato e nei browser che non supportano <canvas>.
Suggerimenti e note
Suggerimento: scopri di più <canvas>sull'elemento nel nostro
tutorial HTML Canvas .
Suggerimento: per un riferimento completo di tutte le proprietà e metodi, visita il nostro Riferimento HTML Canvas .
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'elemento.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Attributi
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
Attributi globali
Il <canvas>tag supporta anche gli attributi globali in HTML .
Attributi dell'evento
Il <canvas>tag supporta anche gli attributi dell'evento in HTML .
Altri esempi
Esempio
Un altro esempio <canvas>:
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Impostazioni CSS predefinite
La maggior parte dei browser visualizzerà l' <canvas>elemento con i seguenti valori predefiniti:
Esempio
canvas {
height: 150px;
width: 300px;
}