HTML5 animare un canvas con javascript
Scusate in anticipo se questa non e' l'area corretta per questa discussione , ma non ho trovato una sezione dedicata al html5; la discussione riguarda all'utilizzo delle funzioni canvas e all;utilizzo di javascript per animarle.
ho creato un piccolo esempio: http://nlsweb.altervista.org/cinque.html
dove con la funzione setInterval cerco di disegnare in modo animato una semplice curva.
il problema e' che il disegno e' alterato ..
il risultato finale dovrebbe essere questo:
Codice:
ctx.moveTo(200,400);
ctx.quadraticCurveTo(250,350,200,300);
ctx.stroke();
io non faccio altro che incrementare o decrementare le variabile che disegnano la curva all'interno di un ciclo temporale.
ma come dicevo prima il disegno risulta sbagliato..
Se qualcuno puo' darmi qualche consiglio per capire dove e' l'errore ... grazie in anticipo.
ancora problemi per animare un arc()
sto provando a creare delle scritte animate con <canvas> e javascript
in questa pagina : http://nlsweb.altervista.org/nuovahome.html
fino a quando uso le linee , quindi lineTo() , nessun problema
quando invece provo a fare degli archi , quindi arc() , ho diversi problemi...
in particolare quando disegno un semiarco quindi da 0.5*Math.PI,1.5*Math.PI (sia in senso orario che antiorario)
la variabile xx che identifica eAngle , parte da 0.5 e si incrementa di 0.1 fino ad arrivare a 1.5
il problema e' proprio qui.. guardando con il debbuger sembra che la variabile non si inizializzi ..
la cosa strana e che ho provato questa variante di codice con un ciclo di for e funziona
for(x=0.5;x<1.5;x+=0.1){
disegno.beginPath();
disegno.arc(150,150,100,0.5*Math.PI,x*Math.PI);
disegno.stroke();
}
quindi il problema e' altrove .. ma ancora non capisco dove...
se gentilemnte potete aiutarmi .
Vi ringrazio anticipatamente .
