Il tag <canvas> è un nuovo tag di HTML5 non presente nelle versioni precedenti del linguaggio, che può essere impiegato per disegnare ed operare con elementi grafici.
Il tag <canvas> necessita di un linguaggio di scripting di supporto, come JavaScript, per funzionare correttamente e svolgere a pieno le sue potenzialità.
Lo scopo di questo articolo è di illustrare l'utilizzo di base di questo nuovo tag ma anche qualche aspetto avanzato, mediante il costante ricorso ad esempi pratici che, mi auguro, vi faciliteranno nell'apprendimento.
Premessa
In quanto novità assoluta canvas non è supportato al meglio da tutti i browser, quindi è possibile che gli esempi dimostrativi di questo articolo non siano visualizzati correttamente.
Il test è stato effettuato con Google Chrome, sul quale non si è manifestato alcun problema.
Utilizzare il tag <canvas>
L'utilizzo comune del tag Canvas è piuttosto semplice e non differisce affatto dagli altri tag del linguaggio HTML.
Formalmente Canvas è un semplice contenitore e, come tale, dispone di un tag di apertura (<canvas>) ed uno di chiusura (</canvas>):
Se non vengono indicate esplicitamente le dimensioni (tramite gli attributi width ed height) la dimensione assegnata al contenitore è quella di default, un rettangolo con base 300 e altezza 150.
L'attributo id, ovviamente, non è indispensabile ma, a mio parere, è buona norma definirlo sempre per avere un riferimento univoco per ogni oggetto che si sta impiegando nella pagina.
La parte testuale delimitata da <canvas> e </canvas> indica la nota da rappresentare qualora l'elemento grafico non sia supportato dal proprio browser.
Prima di iniziare con i dettagli implementativi saggiamo le potenzialità di canvas con un semplice codice da testare in diretta:
A
Come gia annunciato nella parte iniziale dell'articolo in questa sezione di codice è esplicito il fatto che le canvas lavorino per mezzo di uno script. Da questo esempio si può anche osservare subito la tecnica standard per estrarre le variabili di contesto dall'oggetto canvas:
Il metodo getElementById di Javascript memorizza in una variabile l'oggetto canvas, attraverso il valore del suo campo id; getContext('2d') preleva il contesto, ovvero un oggetto che offre al programmatore una serie di metodi per operare con la canvas nel modo desiderato (nel nostro caso specifico si intende lavorare con le funzioni grafiche bidimensionali, cioè 2D).
mrwebmaster.it
Il tag <canvas> necessita di un linguaggio di scripting di supporto, come JavaScript, per funzionare correttamente e svolgere a pieno le sue potenzialità.
Lo scopo di questo articolo è di illustrare l'utilizzo di base di questo nuovo tag ma anche qualche aspetto avanzato, mediante il costante ricorso ad esempi pratici che, mi auguro, vi faciliteranno nell'apprendimento.
Premessa
In quanto novità assoluta canvas non è supportato al meglio da tutti i browser, quindi è possibile che gli esempi dimostrativi di questo articolo non siano visualizzati correttamente.
Il test è stato effettuato con Google Chrome, sul quale non si è manifestato alcun problema.
Utilizzare il tag <canvas>
L'utilizzo comune del tag Canvas è piuttosto semplice e non differisce affatto dagli altri tag del linguaggio HTML.
Formalmente Canvas è un semplice contenitore e, come tale, dispone di un tag di apertura (<canvas>) ed uno di chiusura (</canvas>):
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Se non vengono indicate esplicitamente le dimensioni (tramite gli attributi width ed height) la dimensione assegnata al contenitore è quella di default, un rettangolo con base 300 e altezza 150.
L'attributo id, ovviamente, non è indispensabile ma, a mio parere, è buona norma definirlo sempre per avere un riferimento univoco per ogni oggetto che si sta impiegando nella pagina.
La parte testuale delimitata da <canvas> e </canvas> indica la nota da rappresentare qualora l'elemento grafico non sia supportato dal proprio browser.
Prima di iniziare con i dettagli implementativi saggiamo le potenzialità di canvas con un semplice codice da testare in diretta:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
A
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
potete vedere il risultato di questo codice (per vedere correttamente l'output è necessario avere, lo ripetiamo, un browser che supporta HTML5).Come gia annunciato nella parte iniziale dell'articolo in questa sezione di codice è esplicito il fatto che le canvas lavorino per mezzo di uno script. Da questo esempio si può anche osservare subito la tecnica standard per estrarre le variabili di contesto dall'oggetto canvas:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il metodo getElementById di Javascript memorizza in una variabile l'oggetto canvas, attraverso il valore del suo campo id; getContext('2d') preleva il contesto, ovvero un oggetto che offre al programmatore una serie di metodi per operare con la canvas nel modo desiderato (nel nostro caso specifico si intende lavorare con le funzioni grafiche bidimensionali, cioè 2D).
mrwebmaster.it
