Premi “Invio” per saltare al contenuto

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

Spostare le immagini

Questo articolo è parte della collana Realizzare Giochi in HTML5

Altri articoli in questa collana:

  1. Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I
  2. Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas (Corrente)
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

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.

0

loading spinner

Continua a leggere questa collana:

2 Commenti

  1. Giuseppe Gambino 11 Novembre 2016

    Fantastico, attendiamo il prossimo ;)

    loading spinner
    • Daniele Alessandra 11 Novembre 2016

      Grazie! È sempre bello ricevere commenti come questo. Il prossimo articolo è pronto per essere pubblicato giovedì 24.

      loading spinner

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *