Tutorial sulle Canvas

Questo tutorial descrive come usare l'elemento <canvas> 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.

<canvas> è stato introdotto originariamente da Apple per il Mac OS X Dashboard e solo 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 proveremo a descrivere l'utilizzo dell'elemento <canvas> nelle 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 difficile, ma richiede una conoscenza di base di HTML e JavaScript.

Sebbene l'elemento <canvas> non sia supportato da alcuni vecchi browser dovrebbe essere supportato dalle versioni recenti di tutti i principali browser. La dimensione predefinita del canvas (tela) è di 300px × 150 px (altezza x larghezza). E' possibile personalizzare le dimensioni ricorrendo alle proprietà height e width dei fogli CSS. Nei seguenti esempi ricorreremo a codice javascript (javascript context object) per generare la grafica al volo.

In questo tutorial

• Utilizzo di base
• Disegnare forme
• Applicare stili e colori
• Disegnare il testo
• Usare immagini
• Trasformazioni
• Composizioni e clipping (ritaglio)
• Animazioni di base
• Animazioni avanzate
• Manipolazione dei pixel
• Regioni di interesse e accessibilità
• Ottimizzazione delle canvas
• Fine

Vedi anche

• Canvas topic page
• Esempi e demo - Giochi, applicazioni, strumenti e tutorial
• Plug-in di conversione da Adobe Illustrator a Canvas
• HTML5CanvasTutorials
• 31 giorni di canvas tutorials