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
|
---
title: Canvas
slug: Web/HTML/Canvas
translation_of: Web/API/Canvas_API
---
<p>Aggiunto con <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>HTML {{ HTMLElement("canvas") }}</strong> è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.</p>
<p>Le applicazioni Mozilla supportano <code><canvas></code> a partire da Gecko 1.8 (cioè <a href="/en-US/docs/Firefox_1.5_for_developers" title="en-US/docs/Firefox_1.5_for_developers">Firefox 1.5</a>). L'elemento è stato originariamente introdotto da Apple per OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> e Safari. Internet Explorer supporta <code><canvas></code> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <code><canvas></code> includendo lo script del progetto <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> di Google. Anche Google Chrome e Opera 9 supportano <code><canvas></code>.</p>
<p>L'elemento <code><canvas></code> è utilizzato anche da <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a> per la grafica 3D con accellerazione hardware nelle pagine web.</p>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h2 class="Documentation" id="Documentation" name="Documentation">Documentazione</h2>
<dl>
<dt><a class="external" href="https://html.spec.whatwg.org/multipage/canvas.html" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Specifiche</a></dt>
<dd>L'elemento <code><canvas></code> è parte delle specifiche 1.0 della WhatWG per le applicazioni Web, anche conosciute come HTML5.</dd>
<dt><a href="/en-US/docs/Canvas_tutorial" title="en-US/docs/Canvas_tutorial">Esecitazione sui canvas</a></dt>
<dd>Un'esercitazione completa che copre sia l'utilizzo base che le caratteristiche avanzate di <code><canvas></code>.</dd>
<dt><a href="/en-US/docs/Code_snippets/Canvas" title="en-US/docs/Code_snippets/Canvas">Frammenti di codice: Canvas</a></dt>
<dd>Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <code><canvas></code>.</dd>
<dt><a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Esempi di canvas</a></dt>
<dd>Alcune dimostraioni sui <code><canvas></code>.</dd>
<dt><a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="en-US/docs/HTML/Canvas/Drawing DOM objects into a canvas">Disegnare oggetti DOM in un canvas</a></dt>
<dd>Come disegnare contenuto DOM, come elementi HTML, in un canvas.</dd>
<dt><a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">Un semplice raycaster</a></dt>
<dd>Una demo di animazione ray-tracing utilizzando il canvas.</dd>
<dt><a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces">Interfacce dei Canvas nel DOM</a></dt>
<dd>Interfacce dei Canvas nel DOM implementate in Gecko.</dd>
</dl>
<p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="/en-US/docs/tag/HTML:Canvas">Vedi tutto...</a></span></p>
</td>
<td>
<h2 class="Community" id="Comunità">Comunità</h2>
<p>Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}<br>
<a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></p>
<h2 class="Resources" id="Resources" name="Resources">Risorse</h2>
<ul>
<li><a class="external" href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">Approfondimento HTML5 Canvas</a></li>
<li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Cheat Sheet per Canvas</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
</ul>
<h2 class="Libraries" id="Libraries" name="Libraries">Librerie</h2>
<ul>
<li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> è un potente e leggero framework per canvas</li>
<li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> implementzione del linguaggio di visualizzazione Processing</li>
<li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> è una libreria con un'API simile a Flash</li>
<li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> è una libreria per la creazione di grafici e diagrammi</li>
<li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> è un'API per le animazioni Canvas basata sui keyframe</li>
<li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.</li>
<li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualizzazioni di dati interattive per il Web con Canvas 2D</li>
<li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> è un framework per lo sviluppo di applicazioni e giochi</li>
</ul>
<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">ARGOMENTI CORRELATI</h2>
<ul>
<li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<div>{{ HTML5ArticleTOC() }}</div>
|
