1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
---
title: <canvas>
slug: Web/HTML/Element/canvas
tags:
- Canvas
- Disegno
- Elemento
- HTML
- HTML5
- Riferimento
- Web
translation_of: Web/HTML/Element/canvas
---
<p>L'elemento HTML <strong><code><canvas></code></strong> viene usato per disegnare tramite <a href="/it/docs/Web/JavaScript">JavaScript</a>. 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 <code><canvas></code>: questo contenuto verrà visualizzato sia nei browser che non supportano questo elemento, sia nei browser con JavaScript disabilitato.</p>
<p>Per altri articoli sull'utilizzo di questo elemento, vedi la <a href="/it/docs/Web/API/Canvas_API">pagina riguardo i canvas</a>.</p>
<ul class="htmlelt">
<li><dfn><a href="/it/docs/HTML/Content_categories">Categorie del contenuto</a></dfn> <a href="/it/docs/HTML/Content_categories#Flow_content">Contenuto di flusso</a>, <a href="/it/docs/HTML/Content_categories#Phrasing_content">contenuto testuale</a>, <a href="https://developer.mozilla.org/it/docs/HTML/Content_categories#Embedded_content">contenuto incluso</a>, contenuto tangibile.</li>
<li><dfn>Contenuto permesso</dfn>Elementi trasparenti senza <a href="/it/docs/HTML/Content_categories#Interactive_content">contenuto interattivo</a> diverso dall'elemento {{HTMLElement("a")}}. Elementi {{HTMLElement("input")}} il cui attributo {{htmlattrxref("type", "input")}} è <code>checkbox</code>, <code>radio</code>, o<code>button</code>.</li>
<li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
<li><dfn>Elementi genitori permessi</dfn>Qualsiasi elemento che accetti <a href="/it/docs/HTML/Content_categories#Phrasing_content">contenuto testuale</a></li>
<li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLCanvasElement")}}</li>
</ul>
<h2 id="Attributi">Attributi</h2>
<p>Questo elemento accetta anche gli <a href="https://developer.mozilla.org/it/docs/HTML/Global_attributes">attributi globali</a>.</p>
<dl>
<dt>{{htmlattrdef("height")}}</dt>
<dd>L'altezza dell'elemento in pixels. Il valore predefinito è 150.</dd>
<dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt>
<dd>Permette al browser di sapere se questo elemento userà la trasparenza. Se non, il browser può ottimizzare le performace durante il disegno.</dd>
<dt>{{htmlattrdef("width")}}</dt>
<dd>La larghezza dell'elemento in pixels. Il valore predefinito è 300.</dd>
</dl>
<h2 id="Descrizione">Descrizione</h2>
<h3 id="Richiede_il_tag_di_chiusura_<canvas>">Richiede il tag di chiusura <code></canvas></code></h3>
<p>A differenza dell'elemento {{HTMLElement("img")}}, l'elemento {{HTMLElement("canvas")}} <strong>richiede</strong> il tag di chiusura (<code><canvas>).</code></p>
<h3 id="Dimensioni_del'area_da_disegno">Dimensioni del'area da disegno</h3>
<p>Le dimensioni del'elemento possono essere cambiate usando i fogli di stile. L'immagine viene ridimensionata durante il rendering per rientrare nella dimensione corretta. Se le dimensioni sembrano distorte, prova a specificare gli attributi <code>width</code> e <code>height</code> utilizzando gli attributi anziché il CSS.</p>
<h2 id="Esempi">Esempi</h2>
<pre class="brush: html"><canvas id="canvas" width="300" height="300">
Mi dispiace, ma il tuo browser non supporta l'elemento &lt;canvas&gt;.
</canvas>
</pre>
<p>Se il tuo disegno non ha trasparenza, usa l'attributo <code>moz-opaque</code>. Questa informazione può essere utilizzata per ottimizzare il rendering.</p>
<div class="warning">
<p>Questo attributo non è standard e funziona solo nei motori di rendering basati su Mozilla.</p>
</div>
<pre class="brush: html"><canvas id="mycanvas" moz-opaque></canvas></pre>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specifica</th>
<th scope="col">Stato</th>
<th scope="col">Commento</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Definizione iniziale</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funzionalità</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br>
{{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br>
{{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
<td>9.0</td>
<td>9.0<sup>[4]</sup></td>
<td>2.0<sup>[5]</sup></td>
</tr>
<tr>
<td><code>moz-opaque</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Funzionalità</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Supporto di base</td>
<td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br>
{{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br>
{{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>1.0</td>
</tr>
<tr>
<td><code>moz-opaque</code></td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Prima di Gecko 5.0 {{geckoRelease("5.0")}} le dimensioni di questo elemento erano specificate utilizzando anche numeri negativi.</p>
<p>[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.</p>
<p>[3] Prima di Gecko 12.0 {{geckoRelease("12.0")}}, se JavaScript è disabilitato, viene mostrato l'elemento {{HTMLElement("canvas")}} anziché il contenuto alternativo.</p>
<p>[4] Guarda il <a href="http://www.opera.com/docs/changelogs/windows/900/">changelog di Opera 9.0</a>.</p>
<p>[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.</p>
<h2 id="Vedi_anche">Vedi anche</h2>
<ul>
<li><a href="/it/docs/Web/API/Canvas_API">MDN canvas portal</a></li>
<li><a href="/it/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
<li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li>
<li><a href="/it/demos/tag/tech:canvas">Canvas-related demos</a></li>
<li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li>
</ul>
<div>{{HTMLRef}}</div>
|
