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

Ruotare le immagini

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.

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à.

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