Grafici con Canvas e SVG - HTML5 con CSS e JavaScript - page 231

context.fillStyle = "black";
context.textAlign = "right";
context.textBaseline = "top";
context.font = "bold 12px Tahoma";
context.fillText("Boing: " + count, 590, 10);
context.restore();
}
Come anticipato nel codice, valorizziamo prima le proprietà, rendendo il testo nero, alli-
neato a destra, con la base in alto e con il font formattato come in CSS. Infine, chiamiamo
la funzione fillText che, in coppia con strokeText , permette di riempire e contor-
nare del testo. Poiché abbiamo allineato in alto a destra, le coordinate 590x10 si riferiscono
all'angolo in alto a destra della zona occupata dal testo.
Tutto questo ci porta finalmente a ottenere il risultato finale, visibile nella figura 10.12 .
Questo semplice esempio, in realtà, già ci permette di affrontare la maggior parte delle
funzioni che il contesto 2d mette a disposizione. Le capacità di realizzazione di un gioco
accattivante è, infatti, interamente demandata allo sviluppatore e alle sue capacità di pro-
grammazione, oltre che a una buona base grafica di partenza.
Figura 10.12 - Una palla che rimbalza dentro un contenitore, realizzato tramite canvas.
Rimangono esclusi dagli esempi presentati in questo capitolo solo argomenti più avanzati,
ma di cui, in realtà, possiamo intuire facilmente l'utilizzo, perché identici a quanto visto
con SVG: le trasformazioni per mezzo delle funzioni scale , translate , rotate e
transform . Da segnalare, infine, la funzione toDataURL , che permette di avere uno
screenshot del canvas sotto forma di URI contenente l'immagine PNG serializzata in ba-
se64. Questo può essere molto comodo per salvare l'immagine in maniera che sia traspor-
tabile facilmente, per esempio in una mail o in un documento HTML che non abbia file
esterni.