Premi “Invio” per saltare al contenuto

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

Lavorare con 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 Contesto 2D dei Canvas supporta moltissimi metodi per aggiungere grafica al suo interno, uno particolarmente interessante è drawImage. Il metodo drawImage ci permette di disegnare qualsiasi immagine all’interno di un Canvas, in questo modo:

0

Anche questa volta abbiamo iniziato con un Canvas, poi abbiamo ottenuto un riferimento al suo Context ma prima di poter disegnare l’immagine abbiamo dovuto attendere il caricamento della finestra utilizzando window.onload; questa attesa è necessaria perché non è possibile disegnare in un Canvas un’immagine che non sia ancora stata caricata in memoria.

In uno dei prossimi articoli esploreremo il cosiddetto preload in modo da gestire meglio il problema del caricamento di immagini e suoni, per il momento dobbiamo accontentarci.

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 *