Premi “Invio” per saltare al contenuto

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

Ritagliare 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

Possiamo aggiungere altri quattro valori per gestire una porzione di immagine da ritagliare prima di disegnare sul contesto del Canvas, in questo caso i parametri numerici diventano otto e stranamente anche il loro ordine cambia.

0

Visto che l’ordine dei parametri cambia quando richiamiamo il metodo con tre, cinque o nove parametri immagino che apprezzerete uno schema a colori:

context.drawImage(image, 20, 20);

context.drawImage(image, 20, 20, 510, 360);

context.drawImage(image, 50, 30, 100, 100, 20, 20, 510, 360);
  • Il numero in rosso rappresenta sempre la distanza in pixel dal bordo sinistro del Canvas in cui si comincia a disegnare.
  • Il numero in magenta rappresenta sempre la distanza in pixel dal bordo superiore del Canvas in cui si comincia a disegnare.
  • Il numero arancione rappresenta sempre la larghezza di destinazione in pixel sul Canvas.
  • Il numero verde acido rappresenta sempre l’altezza di destinazione in pixel sul Canvas.
  • Il numero verde lime rappresenta la distanza in pixel dal bordo sinistro dell’immagine di origine.
  • Il numero azzurro rappresenta la distanza in pixel dal bordo superiore dell’immagine di origine.
  • Il numero verde mare rappresenta la larghezza in pixel della porzione da copiare dall’immagine di origine.
  • Il numero blu rappresenta l’altezza in pixel della porzione da copiare dall’immagine di origine.

Ho fatto anche un disegno:

proiezione-maiale

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 *