Page 64 - Guida tascabile HTML5

Anche in questo caso è possibile includere come fallback un contenuto alternativo,
fruibile tramite un plugin aggiuntivo di terze parti (per esempio Adobe Flash Player).

Le funzioni native a disposizione sono molte, ma ciò che rende davvero

interessante e innovativo questo elemento è senza dubbio la possibilità di sfruttare
la versatilità e completezza del linguaggio JavaScript per rendere il canvas in

grado di reagire alle interazioni compiute dall’utente nella pagina, come clic del
mouse, scroll o altri eventi.

RIFERIMENTO Sono disponibili online molte librerie JavaScript, adatte agli scenari di
utilizzo più comuni, che semplificano la gestione del canvas, mettendo a disposizione
funzioni di utilizzo immediato che si affiancano a quelle native, per velocizzare la fase
di sviluppo.

Grafica vettoriale con il tag <svg>

Un approccio alternativo all’utilizzo del tag <canvas>, per alcuni aspetti simile, è

rappresentato dalla possibilità di specificare direttamente nel documento,
all’interno del tag dedicato <svg>, il markup necessario a descrivere una grafica

vettoriale.

TERMINOLOGIA Un disegno vettoriale si differenzia da uno raster perché nel primo

caso gli elementi della grafica sono descritti utilizzando coordinate cartesiane, formule
matematiche e parametri (come un grafico in un foglio di calcolo), mentre nel secondo
caso ogni pixel ha un proprio colore RGB (come nel caso delle fotografie JPG). Una
grafica vettoriale può essere ridimensionata a piacere senza perdere risoluzione,
proprio perché le istruzioni che la compongono sono slegate dai singoli pixel.

La sintassi SVG (acronimo di Scalable Vector Graphics) trae origine dal
linguaggio XML, e condivide alcuni aspetti con l’HTML che stiamo conoscendo:

nidificazione, tag di apertura e chiusura, attributi e commenti sono espressi in
modo analogo.

Alcuni software di disegno vettoriale permettono di esportare direttamente il

codice sorgente SVG, semplificando l’eventuale incorporazione in una pagina
HTML.

Per avere un’idea dell’approccio da seguire, ecco qui di seguito lo stesso

esempio utilizzato nel paragrafo precedente, reso con marcatura SVG in linea nel
tag omonimo.

<svg width="320" height="180">
<!-- linee -->
<line x1="0" y1="20" x2="320" y2="20"
stroke="lightgrey" stroke-width="10" />
<line x1="0" y1="160" x2="320" y2="160"
stroke="lightgrey" stroke-width="10" />