Tutorial sulle Canvas

  • Slug della versione: Tutorial_sulle_Canvas
  • Titolo della versione: Tutorial sulle Canvas
  • ID versione: 169285
  • Data di creazione
  • Autore: Mmarco
  • Versione corrente? No
  • Commento

Contenuto della versione

<canvas> è un nuovo elemento HTML che può essere utilizzato per disegnare elementi grafici utilizzando lo scripting (di solito JavaScript). Per esempio può essere utilizzato per disegnare grafici, fare composizioni di foto o fare semplice (e non così semplice) animazioni. L'immagine a destra mostra alcuni esempi di implementazioni di <canvas> che vedremo più avanti in questo tutorial.

<canvas> è stato introdotto prima da Aapple per il Mac OS X Dashboard e sopo implementato da Safari. Anche il browser basato sulla 1.8 Gecko, come ad esempio Firefox 1.5, supporta questo elemento. L'elemento <canvas> è anche parte delle specifiche WhatWG Web applications 1.0 conosciute come HTML 5

In questo tutorial proverò a descrivere come implementare l'elemento <canvas> nelle tue pagine HTML. Gli esempi forniti dovrebbero darvi dei chiarimenti di cosa tu puoi fare con <canvas> e come può essere utilizzato per iniziare a costruire le tue implementazioni.

Prima di iniziare

Utilizzare l'elemento <canvas> non è molto difficoltoso, ma devi conoschere le badi di HTML e JavaScript.

Come detto sopra, l'elemento <canvas> non è supportato in tutti i moderni browser, così hai bisogno di Firefox 1,5 o un altro browser recente basato su Gecko o Opera 9 oppure una versione recente di Safari per visualizzare tutti gli esempi in azione.

In questo tutorial

Vedi anche

{{template.Next("Canvas tutorial:Basic usage")}}

{{ wiki.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" } ) }}

Sorgente della versione

<p>
<img align="right" src="File:it/Media_Gallery/Canvas_tut_examples.jpg"><b><code><a href="it/HTML/Canvas">&lt;canvas&gt;</a></code></b> è 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 foto o fare semplice (e <a href="it/A_base_RayCaster"> non così semplice</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><p><code>&lt;canvas&gt;</code> è stato introdotto prima da Aapple per il <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> e sopo 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 proverò a descrivere come implementare l'elemento <code>&lt;canvas&gt;</code> nelle tue 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 name="Prima_di_iniziare"> Prima di iniziare </h3>
<p>Utilizzare l'elemento <code>&lt;canvas&gt;</code> non è molto difficoltoso, ma devi conoschere le badi di <a href="it/HTML">HTML</a> e <a href="it/JavaScript">JavaScript</a>.
</p><p>Come detto sopra, l'elemento <code>&lt;canvas&gt;</code> non è supportato in tutti i moderni browser, così hai bisogno di Firefox 1,5 o un altro browser recente basato su Gecko o Opera 9 oppure una versione recente di Safari per visualizzare tutti gli esempi in azione. 
</p>
<h3 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/Usare_immagini">Usare immagini</a>
</li><li> <a href="it/Canvas_tutorial/Applicare_stili_e_colori">Applicare stili e colori</a>
</li><li> <a href="it/Canvas_tutorial/Trasformazioni">Trasformazioni</a>
</li><li> <a href="it/Canvas_tutorial/Composizioni">Composizioni</a>
</li><li> <a href="it/Canvas_tutorial/Animazioni_di_base">Animazioni di base</a>
</li></ul>
<h3 name="Vedi_anche"> Vedi anche </h3>
<ul><li> <a href="it/HTML/Canvas">Canvas topic page</a>
</li><li> <a href="it/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a>
</li><li> <a href="Special:Tags?tag=Canvas_examples&amp;language=it">Canvas examples</a>
</li></ul>
<p>{{template.Next("Canvas tutorial:Basic usage")}}
</p>{{ wiki.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" } ) }}
Ripristina questa versione