2

Estou utilizando o Canvas para fazer isso https://jsfiddle.net/m42hu8zg/ , só que gostaria de parar a animação ao clicar na div usando alguma funcionalidade do requestAnimationFrame. Eu usei o setInterval mas a animação não fica legal, então resolvi usar o requestAnimationFrame mas nao sei parar a animação apos um click e continuar apos outro click.

O código funciona simplesmente com uma circunferência por cima de uma linha usando o método clip(), e quando clica na div, a circunferência move no eixo x passando por cima da linha mostrando-a, só que quero parar a animação apos um click e depois continuar (como um botão de play e stop, dando a intenção que a linha parou de crescer).

Seria possível também eu definir um caminho para a circunferência percorrer apos o click ? Exemplo: http://prntscr.com/7y1wpw

*No meu exemplo ele segue um caminho, mas é em linha reta, eu queria que a circunferência move-se por um caminho já pre-definido como no exemplo acima.

1 Resposta 1

0

Consegui, o que eu fiz foi simplesmente colocar:

ctx.clearRect(cx, 0, canvas.width, canvas.heigth) 

Com cx movendo para esquerda ou para direita, dai ele dava impressão que a linha crescia ou diminuía!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .