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

Nel codice precedente, notiamo che le colorazioni possono essere valorizzate con la stessa
sintassi dei CSS e possiamo capire che tutte le operazioni di riempimento sono influenzate
dalle proprietà a essa relative, così come le operazioni per il contorno.
Questa tecnica è molto comoda perché non obbliga a ripetere numerosi parametri a ogni
funzione di disegno, ma può portare a risultati inaspettati, perché su listati molto lunghi
possiamo perdere il controllo sulla situazione corrente di disegno. Per semplificarci la vita
vengono in aiuto le funzioni save e restore che, se invocate all'inizio e alla fine di un
blocco di codice, garantiscono che al restore la situazione degli stili sia ripristinata a
quella presente quando abbiamo invocato save .
Procediamo ancora con il gioco e per prima cosa disegniamo un'immagine da porre sul-
lo sfondo: con questa tecnica azzeriamo il frame precedente con facilità. Per renderizzarla,
abbiamo a disposizione la funzione drawImage , la quale accetta un'immagine (cioè un
tag <img> di HTML5) e le coordinate di posizionamento.
nota
L'immagine dev'essere un elemento già caricato dal browser, perciò è opportuno
avviare il gioco, e quindi il suo rendering, solo dopo aver caricato tutti gli ele-
menti necessari. L'evento onload del tag body garantisce che questo sia stato
fatto.
Nell'esempio 10.23 vediamo come abbiamo implementato la funzione draw .
Esempio 10.23
function draw() {
// Disegno lo sfondo
context.drawImage(background, 0, 0);
// Disegno la palla
drawBall();
// Scrivo il testo
drawText();
}