Sommario
L'elemento Tela È una delle novità più attese che ha HTML5 Essendo una seria alternativa al plug-in Flash di Adobe, grazie alle sue capacità native e non dipendendo da una libreria di terze parti, otteniamo stabilità e supporto del browser direttamente, in caso di problemi con l'implementazione dello standard HTML5 .L'elemento Tela ci permette di delimitare un'area nei nostri documenti HTML5 dove possiamo disegnare e persino aggiungere effetti e movimenti tramite Javascript.
L'elemento Canvas
Prima di poter iniziare a lavorare con l'oggetto Tela, definiremo le sue caratteristiche di base, abbiamo che è un elemento di flusso, è totalmente nuovo in HTML5, i suoi attributi sono altezza per la sua altezza e larghezza per la sua larghezza.
Vediamo di seguito un piccolo esempio di come possiamo definire un Canvas nel nostro documento:
Esempio Il tuo browser non supporta l'elemento tela Vediamo velocemente cosa succede nell'esempio; prima definiamo uno stile dove assegniamo un bordo leggermente spesso per poter distinguere il nostro Tela vuoto, quindi avviamo l'elemento Canvas con la sua etichetta di apertura e definiamo i suoi attributi di altezza e larghezza, all'interno delle etichette posizioniamo un messaggio nel caso in cui il documento venga aperto con un browser che non supporta questa specifica dello standard.
Vediamo ora come appare questo codice che abbiamo appena spiegato nel nostro browser:
Il nostro primo disegno
Come accennato all'inizio del tutorial, per disegnare e fare azioni all'interno del Canvas dobbiamo usare Javascript, per questo useremo un metodo chiamato getContext() che ci colloca nel contesto della Tela e con essa possiamo dirle cosa mostrare.
Possiamo disegnare figure sia in 2D che in 3D, per questo passiamo nel caso del primo, l'argomento "2d".
Diamo un'occhiata al seguente esempio per definire meglio ciò che stiamo spiegando:
Esempio Il tuo browser non supporta l'elemento tela Qui abbiamo semplicemente definito una variabile ctx a cui andremo ad assegnare l'oggetto documento e quest'ultimo chiamerà il metodo getContext e applicalo sull'elemento Canvas; quindi abbiamo che la variabile ctx chiama un metodo chiamato fillRect e a questo passiamo delle coordinate, se guardiamo bene lo passiamo 4 lati, vediamo che ha disegnato questo nel browser:
