Exercício: O pulso ainda pulsa dúvida com a variável 'raio'

Olá Wesley,

O que ocorre neste programa é que o há uma função pulsar que faz o seguinte:

• Limpa a tela;
• Verifica se o raio é maior que 30 se for coloca o fator de crescimento para -1.
• Verifica se o raio é menor que 20 se for coloca o fator de crescimento para 1.
• Ajusta o raio com o fator de crescimento.
• Desenha o círculo.

A linha do setInterval faz com que esta função seja executada em intervalos regulares de 30 milisegundos.

O que a função faz então é garantir que o circulo sempre tenha um raio maior ou igual a 19 e menor ou igual a 31.

Quando o raio fica menor que 20 é aplicado o fator de crescimento de 1 que faz com que no ajuste aplicado em raio = raio + fatorCresimento; o raio volte a ser 20 e volte a crescer.

Quando o raio fica maior que 30 o fator de crescimento é revertido fazendo com no ajuste ele volte a ser 30 e a cada interação até ele virar 19 ele seja ajustado.

Eu reindentei seu código:

<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 raio = 19;
    var fatorCresimento = 0;
    function pulsar(){
        console.log('Raio: '+raio);
        console.log('Fator de Crescimento: ' + fatorCresimento);
        limpaTela();

        if (raio >30){

            fatorCresimento = -1;
        }
        if(raio < 20){

            fatorCresimento = 1;
        }
        raio = raio + fatorCresimento;
        desenhaCirculo(300,300,raio);
    }

    setInterval(pulsar,30);

</script>

Obrigado foi esclarecedor!