1
resposta

Bola que pulsa

Resultado do exercício para fazer a bola pulsar continuamente, tirei como referencia o exercício anterior, assim ficou dessa forma:

<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, cor) {

        pincel.fillStyle = cor;
        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 volume = 0;

    function pulsa() {

        limpaTela();

        if(raio > 30) {
            volume = -1;
        } else if(raio < 20) {
            volume = 1;
        }
        desenhaCirculo(300, 200, raio, 'red');

        raio = raio + volume;
    }

    setInterval(pulsa, 20);

</script>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

No caso aqui a bola não faz o movimento, porém é só para ter uma ideia de como ficou, escolhi a cor red por pensar que tem mais ligação com pulsar. Primeiramente utilizei a variável inicial do raio com valor 20 e a outra variável com valor 1 criada para repassar as condições de incremento e desencremento, depois de verificar a resolução do instrutor corrigi.

1 resposta

Sua solução para o desafio ficou bacana demais, parabéns pelo empenho.

Caso tenha ficado com alguma dúvida não deixe de compartilhar com a gente.

Continue praticando.

Bons estudos e até mais!