Animazione di linee in Html 5 Canvas

{ Posted on set 12 2012 by maury }
Tags : , , ,
Categories : Generico

I Canvas di Html5 servono per disegnare sulle pagine web e sono molto semplici da usare, basta inserirne uno nel codice html

<canvas id="myCanvas" width="200" height="100"></canvas> 

e poi tramite Javascript disegnare qualcosa, per esempio una linea:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.strokeStyle = "#ff0000";
ctx.lineTo(100,100);
ctx.stroke();

ma se invece volessimo disegnare la linea “lentamente” animandola? Dopo giorni di ricerche convulse su Google ho scoperto che questa funzionalità è presente nel comando “animate” di SVG (l’alternativa ai Canvas ma non supportata da tutti i browser).

L’unica soluzione trovata è costruirsi la funzione da soli usando un po’ di geometria analitica e rispolverando qualche formula di matematica.

MOSTRA IL CODICE….


One Response to “Animazione di linee in Html 5 Canvas”

  1. In effetti continuando a cercare su Google una soluzione (parziale) al problema l’ho trovata, questa fantastica libreria http://ocanvas.org/ di Johannes Koggdal che ha un unico limite: non permette l’animazione di proprietà di tipo oggetto… cmq un lavoro notevole!

Post a Comment