Canvas tutorial:Utilizzo di base

Da MDC.

[modifica] L'elemento <canvas>

Si parte con questo tutorial guardando l'elemento <canvas> stesso.

<canvas id="tutorial" width="150" height="150"></canvas>

Questo è un po come l'elemento img</code, la sola differenza è che non ha gli attributi <code>src e alt L'elemento <canvas> ha solo due attributi - width e height. Questi sono entrabi opzionali e possono essere settati utilizzando le proprietà del DOM. Quando gli attributi width e height non sono specificati, l'elemento canvas sarà inizializzato con un'ampiezza di 300 pixels e con una larghezza di 150 pixels. L'elemento può essere arbitrariamente dimensionato tramite CSS, ma durante il rendering le dimensioni dell'immagine si adattano alle dimensioni del layout.
L'attributo id non è specifico dell'elemento <canvas>, ma è uno degli attributi HTML predefinito che può essere applicato a (o quasi) ogni elemento HTML (come classe</ code> per esempio). E' sempre una buona idea per fornire un ID perché questo rende molto più facile l'individuazione nel nostro script.

All'elemento <code><canvas> possono essere attribuiti stili come ad una normale immagine (margini, bordi, sfondo, ecc.). Tali regole comunque non hanno effetto su quello disegnato nel <canvas>. Vedremo più avanti nel tutorial come questo viene fatto. Quando nessuna regola di stile è stata applicata al <canvas>, questo sarà inizializzato completamente trasparente.

[modifica] Contenuto di riepilogo

Visto che il <canvas> è ancora relativamente nuovo e non è implementato in alcuni browser (ad esempio 1,0 Firefox e Internet Explorer), abbiamo bisogno di un mezzo per offrire contenuti di ripiego, quando un browser non supporta l'elemento.

Questo è molto semplice: basta fornire contenuto alternativo all'interno dell'elemento canvas. I browser che non supportano <canvas> ignorerano il contenitore e il eseguiranno rendering del contenuto di ripiego all'interno dello stesso. I browser che supportano <canvas> ignoreranno il contenuto all'interno del contenitore, e renderanno sono il canvas normalmente.

Per esmpio, dobbiamo fornire una descrizione del testo del contenuto nel canvas o fornire una immagine statica del contenuto renderizato dinamicamente reso. Questo può essere qualcosa di simile a questo:

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>