Redazione
a- a+

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);   // bocca
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);  // occhio sinistro
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);  // occhio destro
ctx.stroke();

Esempi e dettagli nella nostra guida.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Francesco
Hai dubbi su questo articolo?