Web font in Javascript su Canvas
Cosa succede quando intrecciamo un elemento duttile come il canvas con la necessità di presentare del testo che esuli dalle possibilità offerte dai seppur potentissimi mezzi dei CSS3? I risultati, vedremo, sono estremamente convincenti e consentono di applicare effetti professionali mantenendo i contenuti dinamici.
Per saggiare la potenza di questa tecnica cerchiamo di replicare la fisionomia tipografica di un poster cinematografico, nella fattispecie de ‘La Mummia’, action movie americano di fine anni ’90.
Prepariamoci all’uso dei font
Purtroppo per queste finalità non è stata ancora sviluppata nessuna libreria che astragga qualche comoda feature, dovremo quindi lavorare direttamente sulle API del canvas. Iniziamo costruendo una semplice struttura HTML che contempli un elemento <canvas>, creiamo quindi un file index.html:
<!doctype html>
<html>
<head>
<meta character='utf-8'>
<title>Da locandine a canvas</title>
<style>
.locandina { margin: 80px auto;
box-shadow: 0px 0px 30px rgba(22,22,22,0.9);
display: block;
background: transparent url(img/giza.jpg) no-repeat center center;
}
</style>
</head>
<body>
<!-- CANVAS -->
<canvas class="locandina"
data-stile="mummia"
data-prima-parola="THE"
data-seconda-parola="MUMMY"
width="640px" height="400px">
Ops, ti manca il supporto canvas!
</canvas>
<!-- JAVASCRIPT -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="js/application_new.js"></script>
</body>
</html>
L’idea che sta alla base del progetto è quella di rendere il canvas completamente autonomo e consistente rispetto alle informazioni necessarie per sviluppare la scritta, per ottenere questo risultato ci avvaliamo dei comodi data-* attributes offerti dalle specifiche HTML5.
I dati che ci servono sono 3, le due parole che vogliamo comporre nel canvas e il nome dell’effetto da applicare, quest’ultimo dettaglio è comodo se poniamo il tutto in una prospettiva più ampia nella quale siano già stati sviluppati diversi effetti (es: ‘indiana-jones’) e si debba quindi scegliere quale applicare all’elemento in essere.
Concludono la pagina i richiami ai file javascript necessari; per questo progetto utilizzeremo jQuery per la manipolazione del DOM e underscore.js, che offre ottimi metodi per la gestione delle collezioni.
All’interno di application.js inseriremo invece la logica per la creazione dell’effetto, creiamo pertanto un file vuoto con questo nome all’interno di una cartella ‘js’. Completiamo la struttura predisponendo due immagini in una cartella img: giza.jpg (crediti maltman23) che servirà da sfondo e una texture da applicare sulle scritte: marmo.jpg.
Eseguiamo index.html per sincerarci della buona riuscita di queste operazioni preliminari:
Figura 1. Risultato del codice base
(clic per ingrandire)
