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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
|
---
title: HTMLCanvasElement
slug: Web/API/HTMLCanvasElement
tags:
- API
- Canvas
- HTML DOM
- Interfaccia
- Riferimenti
translation_of: Web/API/HTMLCanvasElement
---
<div>
<div>{{APIRef("Canvas API")}}</div>
<div>L'interfaccia <strong>HTMLCanvasElement</strong> fornisce proprietà e metodi per manipolare il layout e la presentazione degli elementi del canvas. L'interfaccia HTMLCanvasElement eredita anche le proprietà ed i metodi della interfaccia {{domxref("HTMLElement")}}.</div>
</div>
<p> </p>
<p>Proprietà</p>
<p><em>Eredita propriet</em>à<em> dalla interfaccia genitore, {{domxref("HTMLElement")}}.</em></p>
<dl>
<dt>{{domxref("HTMLCanvasElement.height")}}</dt>
<dd>Intero positivo che rispecchia l'attributo dell'elemento HTML {{htmlattrxref("height", "canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, come un numero negativo, è usato il valore di default 150.</dd>
<dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
<dd>Un {{jsxref("Boolean")}} che rispecchia l'attributo HTML {{htmlattrxref("moz-opaque", "canvas")}} dell'elemento {{HTMLElement("canvas")}}. Permette al canvas di sapere se la traslucenza sarà un fattore. Se il canvas sa che non ci sarà traslucenza, la prestazione del dipingere puo' essere ottimizzata.</dd>
<dt>{{domxref("HTMLCanvasElement.width")}}</dt>
<dd>Intero positivo che rispecchia l'attributo HTML {{htmlattrxref("width", "canvas")}} dell'elemento {{HTMLElement("canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, ad esempio negativo, è usato il valore di default 300.</dd>
</dl>
<h2 id="Metodi">Metodi</h2>
<p><em>Eredita dal proprio genitore, </em><em>{{domxref("HTMLElement")}}.</em></p>
<dl>
<dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
<dd>Restituisce un oggetto {{domxref("CanvasCaptureMediaStream")}} che è una capture video in tempo reale della superficie del canvas.</dd>
<dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
<dd>Restituisce un contesto di disegno sul canvas, oppure <code>null</code> se l'identificativo del contesto non ha supporto. Un contesto di disegno permette di disegnare sul canvas. Chiamare getContext con "<code>2d</code>" come parametro restituisce un oggetto {{domxref("CanvasRenderingContext2D")}}, mentre chiamarlo con "<code>experimental-webgl</code>" (o "<code>webgl</code>") restituisce un oggetto {{domxref("WebGLRenderingContext")}}. Questo contesto è disponibile solo su browsers che implementano <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
<dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
<dd>Restituisce un URL dati contentente una rappresentazione della immagine nel formato specificato dal parametro tipo (il valore di default è <code>png</code>). L'immagine restituita ha una risoluzione di 96dpi.</dd>
<dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
<dd>Crea un oggetto {{domxref("Blob")}} che rappresenta l'immagine contenuta nel canvas; questo file puo' essere immagazzinato temporaneamente su disco oppure nella memoria a discrezione dell'agente per l'utente (user agent).</dd>
<dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
<dd>Trasferisce il controllo ad un oggetto {{domxref("OffscreenCanvas")}}, o nella thread principale oppure in una worker.</dd>
<dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
<dd>Restituisce un oggetto {{domxref("File")}} che rappresenta l'immagine contenuta nel canvas; questo è un file immagazzinato nella memoria, col nome indicato. Se il tipo del file non è specificato, il tipo di default per l'immagine <code>è </code><code>image/png</code>.</dd>
</dl>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specifica</th>
<th scope="col">Status</th>
<th scope="col">Commento</th>
</tr>
<tr>
<td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
<td>{{Spec2('Media Capture DOM Elements')}}</td>
<td>Aggiunge il metodo <code>captureStream()</code>.</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Il metodo <code>getContext()</code> ora restituisce {{domxref("RenderingContext")}} invece di un oggetto opaco.<br>
Sono stati aggiunti i metodi <code>probablySupportsContext()</code>, <code>setContext()</code> e<code>transferControlToProxy()</code>.</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Definizione iniziale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilità_coi_Browsers">Compatibilità coi Browsers</h2>
<div>{{CompatibilityTable}}</div>
<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 (<code>2D</code> context)</td>
<td>4.0</td>
<td>{{CompatGeckoDesktop('1.9.2')}}</td>
<td>9.0</td>
<td>9.0 [1]</td>
<td>3.1</td>
</tr>
<tr>
<td><code>toBlob()</code></td>
<td>50</td>
<td>{{CompatGeckoDesktop('19')}} [2]</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
</tr>
<tr>
<td><code>probablySupportsContext()</code>,<br>
<code>setContext()</code>,<br>
<code>transferControlToProxy()</code> {{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop('2')}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>captureStream()</code> {{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop('41')}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop(44)}} [3]</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>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support (<code>2D</code> context)</td>
<td>2.1</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>10.0 [1]</td>
<td>3.2</td>
</tr>
<tr>
<td><code>webgl</code> context</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>toBlob()</code></td>
<td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
<td>50</td>
<td>{{CompatGeckoMobile('18')}} [2]</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
</tr>
<tr>
<td><code>probablySupportsContext()</code>,<br>
<code>setContext()</code>,<br>
<code>transferControlToProxy() </code>{{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile('2')}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>captureStream() </code>{{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile('41')}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile(44)}} [3]</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Supporto parziale in Opera Mini 5.0 e successivi.</p>
<p>[2] Il supporto per il terzo parametro, è stato aggiunto solo con Gecko 25: quando viene usato col tipo "image/jpeg," questo argomento specifica la qualità dell'immagine.</p>
<p>[3] Da questa funzionalità dipende una impostazione di preferenza di funzionalità. Imposta<code> come true gfx.offscreencanvas.enabled</code> in about:config .</p>
<h2 id="Vedi_anche">Vedi anche:</h2>
<ul>
<li>elemento HTML che implementa questa interfaccia: {{HTMLElement("canvas")}}.</li>
</ul>
|
