- Learn
- Canvas, guida pratica
- Web font in Javascript su Canvas
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:
Se vuoi aggiornamenti su Web font in Javascript su Canvas inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Database: backup e disaster recovery in Cloud
Capire come minimizzare tempi e costi del Disaster Recovery dei database, utilizzando il cloud, tecniche come le repliche di MySQL o […]