HTML5 Canvas: API per la grafica 2D

Vediamo come disegnare illustrazioni o composizioni all'interno di pagine web grazie alle Canvas API.

Il tag HTML5 <canvas> è un nuovo strumento che permette di creare e gestire disegni grafici all’interno di pagine web tramite un linguaggio di scripting (di solito JavsScript). Il tag <canvas> può essere usato in una grande varietà di realizzazioni: composizioni fotografiche, grafici di rappresentazione, piccole illustrazioni e animazioni vettoriali.

È supportato da tutti i maggiori browser di navigazione a partire dalle seguenti versioni: Internet Explorer 9, Mozilla Firefox 2, Apple Safari 3.1, Google Chrome 2, Opera 10.

Ma come è possibile disegnare all’interno di pagine web, come vengono create le nostre illustrazioni o composizioni? Semplice: è possibile realizzare i nostri progetti grazie alle canvas API per grafica/disegno 2D.

Un classico esempio di implementazione API canvas 2D all’interno di documenti web è il seguente:

<canvas id="nome-canvas"></canvas><script type="text/javascript">var canvas=document.getElementById('nome-canvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);</script>

Facciamo un po’ di chiarezza: attraverso getElemenById è stato richiamato l’ID dell’oggetto canvas precedentemente impostato. Grazie a getContext ('2d') è stato definito lo spazio di disegno (bidimensionale). Le API 2D fillRect e fillStyle hanno poi permesso di tracciare un rettangolo (fillRect e coordinate) e di colorarlo di rosso (fillStyle e valore cromatico).

Le API 2D del tag <canvas> consentono la creazione di elaborati grafici a ogni livello di complessità geometrica e di stile: si va dalle semplici linee tracciate fino alle classiche “faccine” espressive, dall’intersezione di figure geometriche fino a alla creazione di grafici con differenti colori e sfumature.

Nel prossimo esempio disegneremo una faccina sorridente:

ctx.beginPath();ctx.arc(75,75,50,0,Math.PI*2,true); // cerchio (volto)ctx.moveTo(110,75);ctx.arc(75,75,35,0,Math.PI,false);   // boccactx.moveTo(65,65);ctx.arc(60,65,5,0,Math.PI*2,true);  // occhio sinistroctx.moveTo(95,65);ctx.arc(90,65,5,0,Math.PI*2,true);  // occhio destroctx.stroke();

Esempi e dettagli nella nostra guida.