Generico

Animazione di linee in Html 5 Canvas

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

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

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

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

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

Annunci

Un pensiero riguardo “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!

    Mi piace

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...