files/it/web/api/canvas_api/tutorial/index.html


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

---
title: Tutorial sulle Canvas
slug: Web/API/Canvas_API/Tutorial
tags:
  - Canvas tutorial
  - HTML:Canvas
translation_of: Web/API/Canvas_API/Tutorial
original_slug: Tutorial_sulle_Canvas
---
<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>