aboutsummaryrefslogtreecommitdiff
path: root/files/it/web/api/canvas_api
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:47:54 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:47:54 +0100
commit30feb96f6084a2fb976a24ac01c1f4a054611b62 (patch)
treed73194ae27b60156ff0ca54013c8c4ad8519f10a /files/it/web/api/canvas_api
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.tar.gz
translated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.tar.bz2
translated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.zip
unslug it: move
Diffstat (limited to 'files/it/web/api/canvas_api')
-rw-r--r--files/it/web/api/canvas_api/index.html73
-rw-r--r--files/it/web/api/canvas_api/tutorial/index.html55
2 files changed, 128 insertions, 0 deletions
diff --git a/files/it/web/api/canvas_api/index.html b/files/it/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..dcded63973
--- /dev/null
+++ b/files/it/web/api/canvas_api/index.html
@@ -0,0 +1,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>&lt;canvas&gt;</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>&lt;canvas&gt;</code> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <code>&lt;canvas&gt;</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>&lt;canvas&gt;</code>.</p>
+
+<p>L'elemento <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</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>
diff --git a/files/it/web/api/canvas_api/tutorial/index.html b/files/it/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..577a620cb7
--- /dev/null
+++ b/files/it/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,55 @@
+---
+title: Tutorial sulle Canvas
+slug: Tutorial_sulle_Canvas
+tags:
+ - Canvas tutorial
+ - 'HTML:Canvas'
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div class="summary">
+<p><img style="float: right;"><strong><code><a href="it/HTML/Canvas">&lt;canvas&gt;</a></code></strong> è un nuovo elemento <a href="it/HTML">HTML</a> che può essere utilizzato per disegnare elementi grafici utilizzando lo scripting (di solito <a href="it/JavaScript">JavaScript</a>). Per esempio può essere utilizzato per disegnare grafici, fare composizioni di fotografie o semplici (e <a href="it/A_base_RayCaster"> non così semplici</a>) animazioni. L'immagine a destra mostra alcuni esempi di implementazioni di <code> &lt;canvas&gt; </code> che vedremo più avanti in questo tutorial.</p>
+</div>
+
+<p>Questo tutorial descrive come usare l'elemento &lt;canvas&gt; per disegnare grafica 2D, cominciando dagli apetti più elementari. Gli esempi forniti vi forniranno un'idea di ciò che è possibile fare con canvas nonché il codice di alcuni snippet come ispirazione per lo sviluppo dei vostri contenuti originali.</p>
+
+<p><code>&lt;canvas&gt;</code> è stato introdotto originariamente da Apple per il <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> e solo implementato da Safari. Anche il browser basato sulla 1.8 <a href="it/Gecko">Gecko</a>, come ad esempio Firefox 1.5, supporta questo elemento. L'elemento <code>&lt;canvas&gt;</code> è anche parte delle specifiche <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> conosciute come HTML 5</p>
+
+<p>In questo tutorial proveremo a descrivere l'utilizzo dell'elemento <code>&lt;canvas&gt;</code> nelle pagine HTML. Gli esempi forniti dovrebbero darvi dei chiarimenti di cosa tu puoi fare con &lt;canvas&gt; e come può essere utilizzato per iniziare a costruire le tue implementazioni.</p>
+
+<h3 id="Prima_di_iniziare" name="Prima_di_iniziare">Prima di iniziare</h3>
+
+<p>Utilizzare l'elemento <code>&lt;canvas&gt;</code> non è molto difficile, ma richiede una conoscenza di base di <a href="it/HTML">HTML</a> e <a href="it/JavaScript">JavaScript</a>.</p>
+
+<p><span id="result_box" lang="it"><span class="atn hps">Sebbene l'</span><span>elemento &lt;canvas&gt;</span> <span class="hps">non sia supportato da</span> <span class="hps">alcuni vecchi browser dovrebbe essere</span><span class="hps"> supportato dalle</span> <span class="hps">versioni recenti di</span> <span class="hps">tutti i principali browser</span><span>.</span> <span class="hps">La dimensione predefinita</span> <span class="hps">del canvas (tela)</span> <span class="hps">è di 300px</span> <span class="hps">× 150</span> <span class="hps">px</span> <span class="hps">(altezza</span> <span class="hps">x larghezza</span><span>)</span><span>.</span> <span class="hps">E' possibile personalizzare le dimensioni </span></span>ricorrendo alle proprietà <code>height</code> e <code>width</code> dei fogli CSS. Nei seguenti esempi ricorreremo a codice javascript (javascript context object) per generare la grafica al volo.</p>
+
+<h3 id="In_questo_tutorial" name="In_questo_tutorial">In questo tutorial</h3>
+
+<ul>
+ <li><a href="it/Canvas_tutorial/Utilizzo_di_base">Utilizzo di base</a></li>
+ <li><a href="it/Canvas_tutorial/Disegnare_forme">Disegnare forme</a></li>
+ <li><a href="it/Canvas_tutorial/Applicare_stili_e_colori">Applicare stili e colori</a></li>
+ <li>Disegnare il testo</li>
+ <li><a href="it/Canvas_tutorial/Usare_immagini">Usare immagini</a></li>
+ <li><a href="it/Canvas_tutorial/Trasformazioni">Trasformazioni</a></li>
+ <li><a href="it/Canvas_tutorial/Composizioni">Composizioni e clipping (ritaglio)</a></li>
+ <li><a href="it/Canvas_tutorial/Animazioni_di_base">Animazioni di base</a></li>
+ <li>Animazioni avanzate</li>
+ <li>Manipolazione dei pixel</li>
+ <li>Regioni di interesse e accessibilità</li>
+ <li>Ottimizzazione delle canvas</li>
+ <li>Fine</li>
+</ul>
+
+<h3 id="Vedi_anche" name="Vedi_anche">Vedi anche</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Esempi e demo - Giochi, applicazioni, strumenti e tutorial</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Plug-in di conversione da Adobe Illustrator a Canvas</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 giorni di canvas tutorials</a></li>
+</ul>
+
+<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
+
+<p>{{ languages( { "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial", "ru": "ru/\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435_canvas" } ) }}</p>