Loading...
In questo articolo vediamo come disegnare e renderizzare immagini in HTML5. Per fare ciò utilizziamo il tag
In questo articolo vediamo come disegnare e renderizzare immagini in HTML5. Per fare ciò utilizziamo il tag <canvas> che è l’elemento designato per renderizzare grafici, grafica per giochi e immagini on the fly. Un canvas non è niente altro che un rettangolo nella nostra pagina all’interno del quale possiamo usare JavaScript per poter disegnare qualsiasi cosa vogliamo.
Questo elemento è supportato da quasi tutte le versioni recenti dei browser (Firefox, Safari, Chrome e Opera, nonché per i dispositivi Android e iPhone), con l’eccezione di Internet Explorer (almeno fino alla versione 8, la nuova versione 9 dovrebbe colmare questo gap) per il quale è però disponibile una libreria JavaScript (explorercanvas.js) che ne abilita l’utilizzo.
Vediamo allora la definizione di un canvas:
<pre><canvas id="canvId" width="300" height="225"></canvas>
oltre a specificare le dimensioni, non dimentichiamoci di definire l’id che utilizzeremo per poter recuperare l’oggetto in JavaScript come segue:
var canv = document.getElementById("canvId");
dobbiamo poi ottenere il suo context utilizzando il metodo getContext() passando come parametro “2d”, per il “3d” le specifiche sono in fase di definizione:
var canv_context = canv.getContext("2d");
Un buon metodo per sperimentare le API di offerte dal context è quello di usare una console JavaScript all’interno del nostro browser, quale ad esempio Firebug. In Chrome possiamo invece usare la Console per Javascript raggiungibile dal menu Strumenti.
Definiamo un file html utilizzando questo codice:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cancas in HTML 5</title> </head> <body> <canvas id="a" width="300" height="225"></canvas> </body> </html>
e lo apriamo col nostro browser con la console JavaScript abilitata:
Modifichiamo interattivamente il nostro codice JavaScript
sotto l’attributo __proto__ possiamo vedere l’elenco di funzioni disponibili. Una di queste funzioni ci permette di disegnare dei rettangoli, la funzione fillRect():
canv_context.fillRect(50, 25, 150, 100);
Otteniamo il seguente risultato:
Un rettangolo con riempimento di colore nero
Se vogliamo cambiare colore di riempimento (ad esempio giallo) utilizziamo:
canv_context.setFillColor("#ffff00");
oppure usare la proprietà:
canv_context.fillStyle = "#ffff00";
Per cancellare i disegni che abbiamo prodotto nel canvas, basta agire su una delle proprietà del canvas stesso provocandone la ri-renderizzazione, ad esempio:
canv.width = canv.width;
Per disegnare invece delle linee dobbiamo utilizzare due metodi per poter muovere la nostra “matita”:
- moveTo(x,y): posiziona la matita in una data posizione secondo le coordinate date;
- lineTo(x,y): disegna la linea fino alla posizione indicata.
Con il codice seguente, tracciamo una linea a partire dalla coordinata (50,50) fino alla coordinata (50,150), di conseguenza tracceremo una linea verticale:
canv_context.moveTo(50,50); canv_context.lineTo(50,150);
Nessuno dei due metodi traccia realmente una linea, bisogna chiamare per questo scopo un altro metodo:
canv_context.strokeStyle = "#eee"; canv_context.stroke();
Proviamo ora a disegnare una figura con queste API, ad esempio disegniamo un Pac-Man:
canv_context.beginPath(); canv_context.moveTo(100,100); canv_context.arc(100,100,50,0.5,Math.PI*2-0.5); canv_context.fillStyle = "#FFFF00"; canv_context.fill(); canv_context.closePath(); canv_context.strokeStyle = "#000000"; canv_context.stroke(); canv_context.beginPath(); canv_context.arc(100,80,5,0,Math.PI*2); canv_context.fillStyle = "#000000"; canv_context.fill(); canv_context.closePath(); canv_context.strokeStyle = "#000000"; canv_context.stroke();
Otteniamo il seguente risultato:
Un Pac-Man affamato!
Nell’esempio abbiamo utilizzato il metodo arc(x, y, raggio, inizioAngolo, fineAngolo, sensoAntiorario) che riceve come parametri:
- le coordinate (x,y) del centro dell’arco da disegnare;
- il raggio dell’arco;
- inizio e fine Angolo dell’arco da tracciare;
- se abilitare il senso antiorario per disegnare l’arco (se a true).
Il metodo beginPath() informa il context che si sta inizializzando un nuovo path, mentre closePath() indica che la tracciatura è completata. Grazie a questi due metodi otteniamo una linea continua che va dal centro della nostra figura fino a formare la sagoma del nostro Pac-Man.
COMMENTS