Una delle maggiori novità introdotte da HTML5 è la possibilità di disegnare “al volo” sulla pagina web facendo uso di un linguaggio di scriptting come ad esempio JavaScript. Si tratta di definire una porzione della pagina web sulla quale poter disegnare (in 2d) forme geometriche, font di caratteri e persino immagini grafiche. Questa possibilità prende il nome di canvas che significa “tela”.
<canvas>…</canvas>
L’elemento <canvas> necessita di almeno due attributi per definire larghezza ed altezza della superficie sulla quale andare a disegnare. Si possono avere più canvas nella stessa pagina, per potersi riferire ad ognuno di essi è obbligatorio usare un ID per identificarli, quindi un tag valido potrebbe essere questo:
Così facendo abbiamo creato solo un rettangolo largo 250 pixel ed alto 150 pixel, al quale abbiamo assegnato come identificatore univoco wl, possiamo andare a disegnarci sopra come se fosse una piccola lavagna, per farlo si usa javascript, per cui chi non ha esperienza con questo linguaggio troverà forse difficoltà per comprendere a fondo il meccanismo ma gli esempi usati daranno comunque sufficienti informazioni anche ad un utente con poca esperienza in fatto di linguaggi di programmazione.
Per farvi vedere lo spazio occupato da questo canvas, al momento vuoto, gli ho assegnato un colore ed un sottile bordo usando una dichiarazione di style, aggiungiamo anche una scritta che sarà visibile soltanto nel caso in cui il browser non supportasse canvas:
Il tuo browser non supporta canvas di html5
</canvas>
Questo sotto il risultato, a seconda del browser adoperato vedrete un rettangolo vuoto con bordo sottile nero, o la scritta che informa che il vostro browser non supporta canvas:
Per poter disegnare su questo canvas abbiamo detto che useremo javascript, vediamo cosa serve per farlo. Si dichiara una variabile, in questo esempio: weblink, alla quale viene assegnato il canvas definito da html5 con id=”wl”
var weblink = document.getElementById(“wl“);
</script>
Fatto questo serve un’altra variabile che sfrutta un oggetto già presente in html5, si tratta di getContext(“2D”), vediamo di cosa si tratta.
getContext(“2D”)
L’oggetto getContext(“2D”) è incorporato in HTML5, ha molte proprietà e metodi per disegnare linee, curve, rettangoli, cerchi, archi, testi, immagini ed altro ancora. Qui viene assegnato alla variabile context con riferimento alla variabile weblink che identifica il canvas creato in precedenza, questa nuova variabile di fatto sarà richiamata ed utilizzata da tutti i possibili comandi.
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
</script>
Prima però di passare ai vari metodi e proprietà che si possono utilizzare, è utile una dimostrazione per vedere e capire quali siano i punti a cui si fa riferimento sottoforma di coordinate x e y all’interno del canvas stesso. Infatti per scriverci dentro si deve sempre fare riferimento a questi punti dichiarati come x ed y, coordinate per l’appunto.
Le Coordinate del canvas.
Per disegnare si adoperano metodi e proprietà, per le linee ad esempio: moveTo e lineTo che vedremo nella prossima lezione e che servono rispettivamente per posizionare la matita virtuale in un punto preciso del canvas e per disegnare da quel punto ad un altro.
Al solo scopo di capire i punti di riferimento all’interno di un canvas provate a passare col cursore del mouse sul rettangolo sotto, potrete vedere i valori corrispondenti delle coordinate X ed Y, così da avere un’idea più precisa sui riferimenti delle coordinate stesse.
beginPath()
Il metodo beginPath() può essere usato ogni volta che si inizia a disegnare un nuovo tracciato, formato da line, archi, cerchi: lineTo (), arcTo (), quadraticCurveTo (), bezierCurveTo ().
closePath()
Il metodo closePath() può essere usato ogni volta che si finisce di disegnare un nuovo tracciato, formato da line, archi, cerchi: lineTo (), arcTo (), quadraticCurveTo (), bezierCurveTo ().
Bene, anche se non è proprio chiaro il meccanismo poco importa, si tratta di programmazione, nella lezione successiva si vedranno i vari metodi e proprietà per disegnare all’interno di un canvas e sono certo che il tutto risulterà molto più semplice di adesso.
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.