Il canvas è uno dei tag più interessanti che HTML5 mette a disposizione, ma anche uno dei più complessi da gestire, perché il disegno avviene attraverso chiamate JavaScript.
Nello script di oggi vedremo come animare un'immagine dentro un canvas, per applicare effetti tipo quelli legati al loading. Nel caso specifico, date un'immagine (quadrata), procedere a farla ruotare, in modo che l'utente, mentre effettuiamo una chiamata ad una risorsa AJAX, ad esempio, abbia la percezione che la nostra pagina sta caricando dei dati.

Per prima cosa, procediamo ad aggiungere il markup necessario a disegnare un'immagine ed il canvas:

<img id="staticImage" src="loading.png" />
<canvas width="24" height="24" id="loadingCanvas" style="display:none;"></canvas>

Nel nostro esempio, prenderemo il tag img, che punta ad un'immagine statica (una PNG, così da poter gestire le trasparenze) e lo useremo come base, per disegnare dentro il canvas. Il flusso delle operazione che faremo è:

• nascondere il tag img;
• mostrare il tag canvas;
• ripulire il canvas e caricare l'immagine;
• ruotare l'immagine e disegnarla nel canvas;

Ecco il codice:

<script type="text/javascript"><!--

var timer;
var rotation = 0; 
var img = new Image();

// faccio partire l'animazione
$(function(){
  timer = setInterval(animateCanvas, 10);
});

function animateCanvas(){
  // nascondo l'immagine e mostro il canvas
  $('#staticImage').hide();
  $('#loadingCanvas').show();

  img.src = 'loading.png';

  // imposto la dimensione e carico il canvas
  var d = 24;
  var ctx = $('#loadingCanvas').getContext('2d'); 
  ctx.globalCompositeOperation = 'destination-over'; 
  ctx.save();

  // applico la rotazione, pulendo la superficie..
  ctx.clearRect(0,0,d,d); 
  ctx.translate(d/2,d/2);
  rotation++; 
  
  // ...routando l'immagine...
  ctx.rotate(rotation*Math.PI/(d*2));
  ctx.translate(-(d/2),-(d/2));
  
  // e disegnandola sul canvas
  ctx.drawImage(img,0,0); 
  ctx.restore();
}
//--></script>

L'operazione è effettuata ad intervalli regolari (ogni 10 msec), così da essere fluida. Lo script fa uso di jQuery, per semplificare la parte di accesso al DOM e consentirci di soffermarci maggiormente sugli aspetti legati al canvas in sè. Potete, comunque, farne a meno, riscrivendo alcune delle chiamate presenti nello script.

L'animazione, infine, parte all'avvio della pagina, ma è sufficiente richiamare questo codice in seguito ad un particolare evento (ad esempio, il click su un pulsante), per applicarlo alle proprie necessità.