jCanvas è una libreria basata su jQuery che ci semplifica la vita nel disegnare forme sul Canvas di HTML5, sempre più oggetto di interesse per chi vuole realizzare elementi Web e mobile ad alta interattività, complice l'incompatibilità di Flash con dispositivi come iPhone e iPad.
HTML5 fornisce già la possibilità di manipolare la grafica con le sue API Javascript, ma molti trovano poco intuitivo questo approccio, ed il ricorso ai "canvas framework" è sempre più frequente.
Primi passi con jCanvas
In questo articolo costruiamo un semplice grafico per esaminare le principali caratteristiche e potenzialità di questo piccolo framework. Per cominciare, la cosa più divertente che possiamo fare è realizzare subito il primo disegno.
Dobbiamo includere nella nostra pagina sia il core di jQuery (almeno la versione 1.4), sia la libreria jCanvas:
<script type="text/javascript" src="http://common.html.it/js/jquery.js"></script>
<script type="text/javascript" src="https://raw.github.com/caleb531/jcanvas/master/builds/5.2.1/jcanvas.min.js"></script>fatto questo, inseriamo nel body un elemento canvas:
<canvas></canvas>
<script>
// Disegna un disco sul canvas
$("canvas").drawArc({
fillStyle: "black",
x: 100, y: 100,
radius: 50
});come si vede abbiamo stabilito la posizione della forma (x e y), il raggio e il colore di riempimento.
In realtà la funzione drawArc ci consente molto di più, ad esempio possiamo impostare il colore e la dimensione del bordo oppure se disegnare solo un segmento circolare e specificarne inizio e fine in gradi o radianti e se vogliamo una figura chiusa oppure no.
// disegna uno smile
$("canvas").drawArc({
strokeStyle: "#000", strokeWidth: 5,
x: 100, y: 100, radius: 50,
start: 135, end: 225
}).drawArc({
fillStyle:"#000",
x: 70, y: 80, radius: 10
}).drawArc({
fillStyle:"#000",
x: 130, y: 80, radius: 10
}).drawArc({
strokeStyle: "#000", strokeWidth: 5,
x: 100, y: 100, radius: 80
});Molti di questi parametri si applicano a qualunque forma e anche se sono abbastanza semplici da comprendere ne riassumiamo brevemente il significato:
| Parametro | Descrizione |
|---|---|
x e y |
posizione dell'oggetto |
strokeStyle |
colore del bordo |
strokeWidth |
spessore del bordo |
fillStyle |
colore di riempimento |
radius |
il raggio della figura, si applica a archi e a poligoni |
start e end |
definiscono l'angolo di partenza e arrivo del disegno, per default sono espressi in gradi |
Se non ci serve specificare queste caratteristiche il sistema utilizza i valori di default (disco pieno).
Come si vede dal codice che abbiamo utilizzato per disgnare uno smile, è possibile concatenare più operazioni, nel classico stile jQuery.
Oltre alla funzione drawArc, abbiamo a disposizione diversi altri metodi per realizzare composizioni e disegnare sul canvas:
- drawRect, drawEllipse, drawLine e drawPolygon per creare forme semplici
- drawBezier e drawQuad, per creare curve complesse
- drawText, per inserire dei testi
- drawImage, per inserire immagini bitmap all'interno del disegno
