Premi “Invio” per saltare al contenuto

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

Ruotare 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

Ruotare un’immagine disegnata su un Canvas non è un compito complicato, ma è meno immediato di quanto non si penserebbe. Non è possibile ruotare l’immagine, ma è necessario ruotare il Contesto sul quale disegniamo. Un po’ come ruotare il foglio di carta mentre si disegna con la matita.

L’istruzione che ruota il Canvas si chiama rotate e funziona con un valore numerico espresso in Radianti. Utilizzando i Radianti ci viene in aiuto la costante di JavaScript Math.PI che rappresenta il valore di π (Pi greco). Un angolo di 180 gradi corrisponde a π radianti, 2π radianti rappresenta un giro completo.

0

Cosa è successo? Come mai l’immagine è tutta storta?

Ricordate dove si trova il punto di origine del sistema di riferimento del Contesto? Il punto di origine è l’angolo in alto a sinistra, corrispondente alle coordinate [0, 0]. Il punto di origine è anche il centro di rotazione del Contesto.

Per spostare il centro di rotazione del contesto bidimensionale su cui stiamo disegnando ci occorre utilizzare un altro Metodo, il translate. Il metodo translate accetta due valori, rispettivamente ascissa (coordinata x, spostamento in orizzontale) e ordinata (coordinata y, spostamento in verticale).

Se spostiamo le coordinate del punto di origine influenzeremo la rotazione e anche tutte le altre operazioni, quindi per ottenere un risultato soddisfacente senza riscrivere tutte le coordinate degli esempi precedenti è necessario operare tre passaggi:

  1. Spostare le coordinate di origine dall’angolo in alto a sinistra verso il centro del Canvas;
  2. Ruotare il Canvas;
  3. Riportare le coordinate del punto di origine all’angolo in alto a sinistra, e finalmente potremo ridisegnare l’immagine alle coordinate che sappiamo già.

0

Ed ecco che l’immagine ruotata è tornata al centro.

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 *