1
resposta

Minha resposta

<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 = 10;
  var efeito = 10;

  function atualizaTela() {

    limpaTela();

    if (raio == 20) {
      efeito = -10;
    }
    else if (raio == 10) {
      efeito = 10;
    }

    desenhaCirculo(50, 50, raio);
    raio += efeito;

  }


  setInterval(atualizaTela, 1000);


</script>
1 resposta

Eu coloquei os moviementos um pouco mais suave, para parecer mais um coração:

  var raio = 10;
  var efeito = 10;

  function atualizaTela() {

    limpaTela();

    if (raio == 20) {
      efeito = -10;
    }
    else if (raio == 10) {
      efeito = 10;
    }

    desenhaCirculo(50, 50, raio);
    raio += efeito;

  }


  setInterval(atualizaTela, 1000);