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

Come disegnare in un Canvas

Un Canvas vuoto non è molto utile, ma per fortuna scriverci dentro è facilissimo. Iniziamo col disegnare un cerchio:

0

Esplorando i vari tab potete già vedere che si tratta di pochissime righe di codice:

• Una riga di HTML
• Una regola di CSS
• Due variabili e due chiamate a Metodi in JavaScript.

Facile, no? Iniziamo con l’analizzare il contenuto del tab JavaScript:

var canvas = document.getElementsByTagName('canvas')[0];

Questa riga serve a ottenere un riferimento all’elemento Canvas della pagina HTML, se avete letto anche la lezione precedente sapete che stiamo utilizzando il DOM per risalire al tag <canvas>, così che lo script saprà dove disegnare.

Ho utilizzato getElementsByTagName per non modificare il codice HTML del precedente esempio, se avessimo avuto un id sarebbe stato più comodo utilizzare getElementById, ma i modi per selezionare gli elementi di una pagina in JavaScript sono tanti, vi consiglio di cercare su Google la parola magica querySelector, che funziona anche meglio.

var context = canvas.getContext('2d');

La seconda variabile contiene un riferimento al Contesto bidimensionale, è qui che possiamo leggere e scrivere i pixel. Il Contesto 2D espone l’API di disegno con cui gestire forme e colori.

Nel caso in cui ve lo steste chiedendo la risposta è no, non esiste un contesto 3d in cui disegnare, il metodo getContext funziona solo con ‘2d‘ su tutti i browser e su alcuni con ‘webgl‘ (o ‘experimental-webgl‘ ma non è oggetto di questo corso).

È importante comprendere che la variabile canvas contiene un riferimento a un elemento della pagina HTML, appartiene a una classe che si chiama HTMLCanvasElement, fa parte del DOM e va trattato allo stesso modo di un <div> o più similmente di un <img>, mentre la variabile context contiene un riferimento all’universo 2D manipolabile all’interno del Canvas, è un’istanza della classe CanvasRenderingContext2D.

Se ruoto o allungo un Canvas tutto il contesto ne risente: provate ad aggiungere al CSS dell’esempio qui sopra la regola width:100% e vedrete quanto sono brutti i pixel del Context.

context.arc(60, 60, 50, 0, 2 * Math.PI, false);

Ecco uno dei metodi di disegno del Context: arc. Il metodo arc ci permette di disegnare un arco di cerchio in base alle coordinate che inseriamo, che nell’ordine rappresentano:

• Posizione X del centro del cerchio: 60 (pixel).
• Posizione Y del centro del cerchio: 60 (pixel).
• Raggio del cerchio: 50 (pixel).
• Angolo iniziale dell’arco: 0 (radianti).
• Angolo finale del cerchio: 2π (radianti), ovvero una circonferenza completa.
• Senso antiorario della rotazione: falso.

Tutti i metodi di disegno della classe CanvasRenderingContext2D non visualizzano nulla a video, possiamo utilizzare tutti questi metodi per creare un elenco di forme che vogliamo visualizzare e alla fine richiameremo una singola volta il metodo che disegna davvero tutti questi pixel all’interno del Contesto. Questo comportamento prende il nome di Immediate Mode Rendering.

context.stroke();

Ecco che, tutte in una volta, vengono tracciate le forme descritte in precedenza. Il metodo stroke traccia soltanto il contorno, un altro metodo chiamato fill disegna il riempimento.