Visualizzazione risultati 1 fino 5 di 5

Discussione: HTML5 animare un canvas con javascript

  1. #1
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito 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.
    Ultima modifica di karl94 : 03-05-2014 alle ore 14.52.55

  2. #2
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,744

    Predefinito

    Il tuo problema è che non cancelli quello che hai disegnato nel fotogramma precedente, ma sovrapponi il tutto.

  3. #3
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Citazione Originalmente inviato da karl94 Visualizza messaggio
    Il tuo problema è che non cancelli quello che hai disegnato nel fotogramma precedente, ma sovrapponi il tutto.
    hai perfettamente ragione.. ho aggiunto clearRect e adesso funziona .. ancora non sono molto soddisfatto dell'animazione , ma funziona decisamente meglio ! Grazie tante !

  4. #4
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

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

  5. #5
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •