2
respostas

não diminui

ola, tentei o codigo usando true e false, mas a bolinha apenas aumenta mas não diminui , alguém saberia dizer porque a bolinha não diminui.

<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(x,y,raio,cor){

        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,raio,0,2 * Math.PI);
        pincel.fill();

    }
var raio = 20;

  function pulsar(){

  if(raio == 20 ){

     aumenta = true
     diminui = false
   }
  if (raio == 60){

      aumenta = false
      diminui = true
  }

  if(aumenta){


      desenhaCirculo(100,100, raio);
      raio++;
  }
  if (diminui){


      desenhaCirculo(100,100,raio);
      raio--;
  }


  }


  setInterval(pulsar,40);




</script>
2 respostas

Fala Carlos, Beleza?

Na verdade seu circulo está aumentando e diminuindo. Ele está tendo o comportamento que você deseja.

Você não está conseguindo visualizar porque o canvas pinta o circulo mas não desfaz essa "pintura" para poder pintar novamente... Você vê o circulo crescendo porque cada vez que ele for pintar será em uma área maior que a anterior porém, quando for diminuir a área será menor, e ai você não consegue visualizar o comportamento de "diminuição" da bolinha.

Uma solução é pintar novamente todo o fundo do canvas antes de fazer a bolinha diminuir. Porque ai vc terá uma tela em branco e, em sequência, uma bola menor a cada repetição do intevalo definido.

Ficaria assim:

if (diminui) {
  pincel.fillStyle = "lightgrey";
  pincel.fillRect(0, 0, 600, 400);
  desenhaCirculo(100, 100, raio);
  raio--;
}

Espero ter ajudado! Abs.

ola Eraldo obrigado pela ajuda, o codigo agora funcionou , e fiz uma funçao limpTela,

<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(x,y,raio,cor){

        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,raio,0,2 * Math.PI);
        pincel.fill();

    }
function limpaTela(){

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

var raio = 20;

  function pulsar(){

  if(raio == 20 ){

     aumenta = true
     diminui = false
   }
  if (raio == 60){

      aumenta = false
      diminui = true
  }

  if(aumenta){


      desenhaCirculo(100,100, raio);
      raio++;
  }
  if (diminui){

      limpaTela()
      desenhaCirculo(100,100,raio);
      raio--;
  }


  }


  setInterval(pulsar,40);




</script>