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 {{HTMLElement("a")}}. Elementi {{HTMLElement("input")}} il cui attributo {{htmlattrxref("type", "input")}} è
checkbox
,radio
, obutton
. - Omissione del tag {{no_tag_omission}}
- Elementi genitori permessiQualsiasi elemento che accetti contenuto testuale
- Interfaccia DOM {{domxref("HTMLCanvasElement")}}
Attributi
Questo elemento accetta anche gli attributi globali.
- {{htmlattrdef("height")}}
- L'altezza dell'elemento in pixels. Il valore predefinito è 150.
- {{htmlattrdef("moz-opaque")}} {{non-standard_inline}}
- Permette al browser di sapere se questo elemento userà la trasparenza. Se non, il browser può ottimizzare le performace durante il disegno.
- {{htmlattrdef("width")}}
- La larghezza dell'elemento in pixels. Il valore predefinito è 300.
Descrizione
Richiede il tag di chiusura </canvas>
A differenza dell'elemento {{HTMLElement("img")}}, l'elemento {{HTMLElement("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 |
---|---|---|
{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML5 W3C')}} | Definizione iniziale |
Compatibilità con i browser
{{CompatibilityTable}}
Funzionalità | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatGeckoDesktop("1.8")}}[1] {{CompatGeckoDesktop("6.0")}}[2] {{CompatGeckoDesktop("12.0")}}[3] |
9.0 | 9.0[4] | 2.0[5] |
moz-opaque |
{{CompatNo}} | {{CompatGeckoDesktop("1.9.1")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Funzionalità | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Supporto di base | {{CompatGeckoDesktop("1.8")}}[1] {{CompatGeckoDesktop("6.0")}}[2] {{CompatGeckoDesktop("12.0")}}[3] |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | 1.0 |
moz-opaque |
{{CompatGeckoMobile("1.9.1")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] Prima di Gecko 5.0 {{geckoRelease("5.0")}} le dimensioni di questo elemento erano specificate utilizzando anche numeri negativi.
[2] Prima di Gecko 6.0 {{geckoRelease("6.0")}}, un elemento {{HTMLElement("canvas")}} con altezza o larghezza pari a zero veniva mostrato con le dimensioni predefinite.
[3] Prima di Gecko 12.0 {{geckoRelease("12.0")}}, se JavaScript è disabilitato, viene mostrato l'elemento {{HTMLElement("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