Categorie
ECMAscript Giochi HTML5 Tutorial Tutorial JavaScript

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

Il secondo articolo di una serie che ci porterà alla realizzazione di giochi completi in HTML5. Oggi disegniamo su un Canvas!

loading spinner

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 risposte su “Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas”

Lascia un commento

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