Effetti Tipografici con i Canvas

Tra i vari elementi introdotti dalla nuova specifica HTML5 c'è da dire che gli elementi canvas sono quelli che portano con se la più grande rivoluzione!

Contenuti Extra

L'elemento Canvas in HTML5

In questo Sentiero verrete a conoscenza di quali effetti è possibile realizzare all’interno degli elementi canvas HTML5. Apprenderemo come sia possibile programmare determinate caratteristiche attraverso il linguaggio JavaScript, come interagire con i movimenti del mouse e molto altro!

  1. Canvas – Impariamo a Muovere i Primi Passi
  2. Effetti Tipografici con i Canvas
  3. Disegnamo un Cocomero con i Canvas

Infatti come abbiamo visto nella puntata precedente questo tipo di elemento ci offre una superficie dove potremmo andare a disegnare qualsiasi forma che desideriamo, aggiungere degli effetti ad essa e modificarla a nostro piacimento! Inoltre lungo questa serie di articoli andremo ad imparare come creare e gestire il 3D all’interno dei nostri canvas e anche come sia possibile sviluppare dei veri e proprio video giochi sempre con i canvas!

Ma come tutti i percorsi formativi che si rispettino, dobbiamo fare un passo alla volta, e quale potrà essere il passo migliore se non andare ad analizzare una parte del web tanto comune a tutti noi, il testo!

In questa puntata andremo infatti a scoprire alcune delle meraviglie della Text API dei canvas e scopriremo come sia possibile creare e modificare il testo al loro interno. Ma come sempre partiamo da una solida struttura:

Abbiamo appena creato un canvas pronto per i nostri esperimenti, in questo caso non abbiamo inserito alcun testo al suo interno, che verrebbe visualizzato sui browser che non supportano gli elementi canvas, semplicemente perché se vogliamo sperimentare con i canvas dobbiamo lavorare con un browser che li supporta! Quindi se desideriamo continuare a leggere questo articolo e sperimentare le informazioni che troveremo, sarà meglio andarsi a scaricare FireFox o Google Chrome.

Prepariamo il Canvas

Una volta che la nostra pagina HTML5 è pronta, non ci resta che preparare il nostro codice JavaScript per gli esperimenti che andremmo a fare, ecco quindi il blocco di codice che ci permetterà di iniziare i nostri esperimenti:

Una volta preparato il campo non ci resta altro che andare a vedere come sia possibile creare effettivamente del testo! All’interno dei canvas esistono due metodi per creare del testo e prendono il nome di fillText e strokeText dove il primo permette di disegnare la forma del testo mentre il secondo è incaricato di disegnare la traccia che delinea il testo stesso.

Adesso che stiamo analizzando i metodi che ci aiuteranno a creare del testo mi sembra doveroso introdurre anche tutti gli altri metodi che ci permetteranno di personalizzare ulteriormente il testo inserito:

  • font – permette di specificare il carattere che dovrà essere utilizzato per il testo, lavora proprio come la proprietà font-family dei più comuni CSS;
  • textAlign – con questo metodo saremo in grado di dichiarare l’allineamento orizzontale del testo che verrà inserito, i valori accettati sono start, end, left, right e center;
  • textBaseline – con questo metodo saremo invece in grado di specificare il suo allineamento verticale , i valori accettati sono top, hanging, middle, alphabetic, ideographic, bottom.

Ecco presentati alcuni tra i principali attributi della Text API appartenenti ai canvas, ma non abbiamo ancora analizzato i due metodi presentati precedentemente… Vediamo da vicino le loro dichiarazioni e cerchiamo di capire come sia possibile personalizzarli:

  • fillText( testDaDisegnare, x, y, [optional] maxWidth ) – questo metodo richiede tre parametri principali ed un quarto opzionale, il primo accetta una stringa che rappresenterà il testo da mostrare a video, il secondo e il terzo saranno dei valori numerici che identificheranno rispettivamente la posizione rispetto all’asse x e y, l’ultimo parametro se specificato delimiterà una larghezza massima che se raggiunta dal testo, provvederà a ridimenzionare il font per una corretta visualizzazione;
  • strokeText( testDaDisegnare, x, y, [optional] maxWidth ) – i parametri di questo metodo sono praticamente identici quindi per una descrizione vi suggerisco di leggervi quella appena riportata al punto precedente.

Ora siamo pronti a buttare giu il nostro primo blocco di codice che ci permetterà di disegnare all’interno dei nostri canvas il testo desiderato.

Se non vi siete ancora procurati un browser recente ecco a voi un piccolo esempio di quello che potremo ottenere eseguendo il codice che abbiamo appena inserito:

Testo con CanvasNiente di speciale davvero, ma almeno siamo riusciti ad usare la Text API per i nostri scopi e mostrare due stringhe di testo completamente diverse!

Aggiungiamo le Ombre

Una delle prime API che andremo ad utilizzare con il nostro testo appena creato saranno le Shadow API, ovvero quella collezione di metodi e proprietà che ci permetteranno di creare delle ombre applicabili ai nostri testi e, generalmente, a qualsiasi altro elemento che un canvas è in grado di disegnare!

Per prima cosa andiamo a familiarizzare con le Shadow API:

  • shadowColor – proprietà che permette di settare il colore della propria ombra, accetta tutti i valori che un classico CSS è in grado di accettare;
  • shadowBlur – qui ci viene permesso di modificare la sfumatura della nostra ombra, anche se non specificata, l’unità di misura sono i pixel;
  • shadowOffsetX e shadowOffsetY – sono le due proprietà che ci permettono di spostare l’ombra dal nostro oggetto di partenza, anche in questo caso l’unità di misura accettata sono i pixel.

Bene siamo pronti a sperimentare con questa API giusto? Andiamo a modificare il codice JavaScript come segue:

ed una volta aggiornato il browser troveremo ad aspettarci qualcosa del genere:

Ombra Testo con i CanvasMa aspetta un secondo… Cosa significa quel can.width / 2 e can.height / 2?? Vi ricordate che avevamo utilizzato il metodo document.getElementById() ed avevamo affidato il suo valore alla variabile can. Bene è giunto il momento di utilizzare le sue proprietà, infatti con quelle due operazioni siamo in grado di disegnare il nostro testo centrato rispetto al nostro canvas!

Utiliziamo i Gradienti

L’articolo precedente intitolato Usiamo i Gradienti CSS3 ci ha mostrato come sia possibile realizzare dei gradienti con del puro CSS, ma grazie all’introduzione dell’oggetto CanvasGradient possiamo applicare un gradiente a qualsiasi elemento disegnato all’interno del canvas! Per creare uno di questi oggetti potremmo affidarci a due metodi, createLinearGradient e createRadialGradient, come è facile intuire, il primo metodo genera un gradiente lineare, dove i colori si sfumano seguendo una determinata direzione, mentre il secondo metodo ci permette di creare dei gradienti radiali, dove i colori sfumano allargando man mano i cerchi partendo da un punto centrale unico.

Per capire al meglio a cosa mi sto riferendo potrebbe essere utile vedere queste immagini:

Canvas Gradienti Lineari e RadialiSicuramente non è il miglior esempio al mondo, ma sono sicuro che rende l’idea! Nel primo rigo abbiamo applicato un gradiente lineare che parte da un rosso per arrivare fino ad un giallo passando per il blue, il secondo esempio è invece un esempio di gradiente radiale che colora il nostro testo con diverse tonalità di verde. Come è stato possibile tutto questo? Vi basterà guardare il seguente blocco di codice!

L’unica differenza che possiamo notare tra i due metodi è che mentre il primo accetta quattro parametri per definire da dove far partire la sfumatura a dove farla finire, il metodo createRadialGradient() accetta inoltre un terzo ed un sesto parametro che permetterà di definire il raggio stesso della sfumatura. Siccome sono parametri che inizialmente possono essere difficili da comprendere e seguire, vi suggerisco di giocare un pò con loro, visto che una volta che ci avrete preso la mano diventerà tutto in discesa!

Conclusioni

Ancora una volta siamo giunti al termine di questa puntata, ma non vi scoraggiate, l’argomento canvas è molto sentito da tutti noi di HTML5 AndMore e ritroverete presto altri interessanti tutorial ed esempi per apprendere sempre più tutto quello che c’è da sapere, o almeno tutto quello che sappiamo noi…

E voi cosa ne pensate? Dovremmo portare avanti questo argomento oppure preferite che iniziamo a creare altri tipi di contenuto? Magari vi interessa avere qualche tutorial completo su come realizzare una applicazione in HTML5, vi piacerebbe vedere come noi realizziamo i nostri progetti oppure… ditelo voi! La sezione dei commenti è aperta e siamo semprealla ricerca di nuovi spunti e suggerimenti per nuovi articoli e tutorial, quindi esprimete un desiderio e pubblicatelo qua sotto!

Lascia il tuo Pensiero