Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas

Spostare le immagini

Il Metodo drawImage utilizzato in precedenza utilizzava tre parametri, il primo era una variabile che conteneva un riferimento all’immagine da disegnare, gli altri erano due zeri e rappresentavano le coordinate, all’interno del contesto bidimensionale del Canvas, in cui disegnare.

Il sistema di coordinate del Canvas è espresso in pixel e ha il suo punto iniziale [0, 0] in corrispondenza dell’angolo in alto a sinistra.

Convenzionalmente le due coordinate vengono rappresentate dalle lettere x e y, chi ha dimestichezza con il concetto di Piano Cartesiano le chiama ascisse e ordinate. Il punto in cui le rette si incontrano si chiama origine.

Aumentando il valore di x ci si sposta verso destra, aumentando il valore di y ci si sposta verso il basso.