Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

jCanvas, un primo semplice grafico

Alla scoperta della libreria jCanvas, per semplificare il disegno e animazione su Canvas di HTML5
Alla scoperta della libreria jCanvas, per semplificare il disegno e animazione su Canvas di HTML5
Link copiato negli appunti

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>

e finalmente inseriamo il nostro script con il quale creiamo un disco:

<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.

Figura 1. Uno "smile" con jCanvas
Uno 'smile' con jCanvas

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


Ti consigliamo anche