L'elemento HTML <canvas>
viene usato per disegnare tramite JavaScript. Per esempio, può essere usato per disegnare, modificare foto o creare animazioni. Si può (e si dovrebbe) fornire un contenuto alternativo all'interno del tag <canvas>
: questo contenuto verrà visualizzato sia nei browser che non supportano questo elemento, sia nei browser con JavaScript disabilitato.
Per altri articoli sull'utilizzo di questo elemento, vedi la pagina riguardo i canvas.
- Categorie del contenuto Contenuto di flusso, contenuto testuale, contenuto incluso, contenuto tangibile.
- Contenuto permessoElementi trasparenti senza contenuto interattivo diverso dall'elemento
<a>
. Elementi<input>
il cui attributotype
ècheckbox
,radio
, obutton
. - Omissione del tag Nessuna, sia il tag di apertura che quello di chiusura sono obbligatori.
- Elementi genitori permessiQualsiasi elemento che accetti contenuto testuale
- Interfaccia DOM
HTMLCanvasElement
Attributi
Questo elemento accetta anche gli attributi globali.
height
- L'altezza dell'elemento in pixels. Il valore predefinito è 150.
moz-opaque
- Permette al browser di sapere se questo elemento userà la trasparenza. Se non, il browser può ottimizzare le performace durante il disegno.
width
- La larghezza dell'elemento in pixels. Il valore predefinito è 300.
Descrizione
Richiede il tag di chiusura </canvas>
A differenza dell'elemento <img>
, l'elemento <canvas>
richiede il tag di chiusura (<canvas>).
Dimensioni del'area da disegno
Le dimensioni del'elemento possono essere cambiate usando i focli di stile. L'immagine viene ridimensionata durante il rendering per rientrare nella dimensione corretta. Se le dimensioni sembrano distorte, prova a specificare gli attributi width
e height
utilizzando gli attributi anziché il CSS.
Esempi
<canvas id="canvas" width="300" height="300"> Mi dispiace, ma il tuo browser non supporta l'elemento <canvas>. </canvas>
Se il tuo disegno non ha trasparenza, usa l'attributo moz-opaque
. Questa informazione può essere utilizzata per ottimizzare il rendering.
Questo attributo non è standard e funziona solo nei motori di rendering basati su Mozilla.
<canvas id="mycanvas" moz-opaque></canvas>
Specifiche
Specifica | Stato | Commento |
---|---|---|
WHATWG HTML Living Standard The definition of '<canvas>' in that specification. |
Living Standard | |
HTML5 The definition of '<canvas>' in that specification. |
Recommendation | Definizione iniziale |
Compatibilità con i browser
Funzionalità | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.5 (1.8)[1] 6.0 (6.0)[2] 12.0 (12.0)[3] |
9.0 | 9.0[4] | 2.0[5] |
moz-opaque |
Not supported | 3.5 (1.9.1) | Not supported | Not supported | Not supported |
Funzionalità | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Supporto di base | 1.5 (1.8)[1] 6.0 (6.0)[2] 12.0 (12.0)[3] |
? | ? | ? | 1.0 |
moz-opaque |
1.0 (1.9.1) | Not supported | Not supported | Not supported | Not supported |
[1] Prima di Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) le dimensioni di questo elemento erano specificate utilizzando anche numeri negativi.
[2] Prima di Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), un elemento <canvas>
con altezza o larghezza pari a zero veniva mostrato con le dimensioni predefinite.
[3] Prima di Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), se JavaScript è disabilitato, viene mostrato l'elemento <canvas>
anziché il contenuto alternativo.
[4] Guarda il changelog di Opera 9.0.
[5] Anche se alcune vecchie versioni di Safari (fino alla 2.0) non richiedono il tag di chiusura, la specifica indica che è richiesto; quindi andrebbe usato per garantire la compatibilità con altri browser. Inoltre queste versioni di Safari mostrano sia il disegno che il contenuto alternativo, a meno che non si usi qualche trucco CSS per nasconderlo. Fortunatamente adesso gli utenti che usano queste versioni del browser sono molto rari.
Vedi anche
- MDN canvas portal
- Canvas tutorial
- Canvas cheat sheet
- Canvas-related demos
- Canvas introduction by Apple