1
resposta

Minha Sugestão

<canvas width="600" height="400"></canvas>

<script>

    var tela=document.querySelector('canvas');
    var pincel=tela.getContext('2d');

    pincel.fillStyle='lightgrey';
    pincel.fillRect(0,0,600,400);

    function desenhaCirculo(raio) {
        pincel.fillStyle='red';
        pincel.beginPath();
        pincel.arc(300,200,raio,0,2*Math.PI);
        pincel.fill();
    }

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

    var raio=20
    var sentido=1

    function pulsaCirculo () {
        limpaTela();

        if (raio >30) {
            sentido=-1;
        }else if (raio < 20) {    //para o efeito pulsar preciso que o raio aumente o máximo e diminua até raio inicial.
            sentido=1;
        }

        desenhaCirculo(raio);
        raio=raio+sentido;
    }

    setInterval(pulsaCirculo,20);

</script>
1 resposta

Olá, Victoria! Como vai? ^-^

Mandou muito bem! Parabéns!

Caso tenha ficado não deixe de compartilhar com a gente.

Continue praticando, bons estudos e até mais! =)