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

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 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 *