Entrar Ainda não tem acesso?
1
resposta

No caso, se eu somente quisesse parar a bolinha e mostrando constantemente só ela indo e parando, como eu faria o loop dessa função?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Movendo elementos: animações simples e atividade Tudo que vai volta!

por Fernando Augusto Maciel Arana
| 53.1k xp | 7 posts
<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {
        pincel.clearRect(0, 0, 600, 400);

    }

    var x = 20;

        function atualizaTela() {

        while(x <= 600){

        limpaTela();

        desenhaCirculo(x, 20, 10);
        x++

        break;
        }
    }

    setInterval(atualizaTela, 10);




</script>
1 resposta
por Geovani Granieri
| 909.1k xp | 1038 posts
Instrutor

Olá Fernando, tudo bem com você?

Perdão pela demora! Acredito que já tenha compreendido o problema, mas é sempre bom deixar de base para outros alunos que venham a ter essa dúvida :)

Não entendi o que você quis dizer com ela ir indo e parando, se quis dizer até uma posição do canvas e depois voltar aparecer no inicio?

Observei que você utilizou, entretanto esse código não há como ser feito utilizando loops, porque precisamos constantemente atualizar a tela com o setInterval e a cada execução iriamos criar um novo while com valores diferentes, o que pesa bastante a página, inclusive alguns navegadores iriam para pedir para interromper a execução

O segundo problema é que para fazer de 20 a 600 sem o setInterval usando while demora menos de meio segundo, então seria impossível ver na tela a execução pois iria rapidamente passar de um lado para o outro, eu fiz um pequeno teste e após o navegador interromper a execução da página conseguimos observar a posição da bolinha.

Então por mais que esse exercício caber um loop o ideal é adotar a alternativa utilizada pelo instrutor, dessa forma garantimos que teremos uma atualização constante e que não iremos sobrecarregar o navegador

Abraços e Bons Estudos!