1
resposta

minha resposta

andando e pulsando:

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

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

  pincel.fillStyle = 'gray';
  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;
  var raio = 20;
  var pulso = 1;
  var sentido = 1;
  function desenhaBolinha() {
    limpaTela();
    if (raio > 30) {
      pulso = -1;
      if (x > 600) {
        sentido = -1;
      }
    } else if (raio < 20) {
      pulso = 1;
      if (x < 0) {
        sentido = 1;
      }
    }
    desenhaCirculo(x, 200, raio);
    raio = raio + pulso;
    x = x + sentido;
  }

  setInterval(desenhaBolinha, 20);
</script>
1 resposta

Oi, Welliton! Tudo bem por aí?

Mandou bem!

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!