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

ballx = ballx + (vx * speed);
bally = bally + (vy * speed);
}
La variabile speed è un coefficiente che permette di accelerare lo spostamento della palla,
poiché vx e vy danno solo il senso con valori +1 o -1. A questo punto, abbiamo un motore
che gira e aggiorna le variabili di posizionamento della palla e non ci resta che disegnarla
sulla nostra superficie.
Implementiamo, quindi, il metodo draw , agendo completamente sull'oggetto con-
text , creato allo start dell'applicazione. Su di esso possiamo chiamare una serie di funzio-
ni per il disegno sulla superficie, con metodologie e concetti del tutto simili a quanto visto
con SVG. La differenza risiede solo nel modo con cui disegniamo: non più da markup, ma
programmaticamente, cioè da codice JavaScript.
Nella realizzazione di un gioco, l'implementazione della funzione draw comporta
l'esecuzione delle attività di disegno del frame, che vengono ripetute più volte, annullando
il frame precedente, semplicemente sovrascrivendolo. Per capire come fare, vediamo quali
sono le primitive di disegno che abbiamo a disposizione.
Le API di disegno
Le API che abbiamo a disposizione sul contesto possono essere sostanzialmente raggrup-
pate in tre categorie: shape, immagini e testo. Questi elementi hanno in comune il fatto che
possono avere un colore di riempimento e di contorno, perciò il contesto implementa una
logica di disegno che si basa su uno stile. Ogni funzione di disegno deve, infatti, essere
preceduta dall'impostazione delle proprietà che ne influenzano l'attività. L'esempio 10.22
disegna un rettangolo rosso con un contorno di nero di due pixel e rende più semplice il
concetto.
Esempio 10.22
context.fillStyle = "red";
context.strokeStyle = "black";
context.lineWidth = 2;
context.fillRect(0, 0, 400, 300);
context.strokeRect(0, 0, 400, 300);