1
resposta

Como fazer a bolinha parar de pulsar?

Fiz uma pequena "melhoria" no programa e agora a bolinha só começa a pulsar depois de um clique na tela. Funcionou! O interessante é que se clicarmos de novo na tela outra bolinha começa a pulsar sobreposta com a primeira. Queria fazer a bolinha parar de pulsar apertando alguma tecla ou o botão direito do mouse mas não consegui pois não sei como interromper o "setInterval que fica rodando sem parar. Existe alguma maneira de fazer isto?

<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 = "red";
        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 sentido = 0
    function atualizaTela() {

        limpaTela();

        if( raio > 30) {
            sentido = -1;
        } else if (raio < 20 ) {
            sentido = 1;
        }
        raio = raio + sentido;
        desenhaCirculo(50, 50, raio);

    }

    function comeca (){

        setInterval(atualizaTela, 20);
    }
    tela.onclick = comeca;
1 resposta

Claudio,

quando você clica várias vezes, a bolinha acelera não porque outra bolinha é desenhada, mas é um "problema" inerente ao setInterval, que tem seu intervalo reduzido a cada vez que é executado. Fiz um código que permite o acionamento do setInterval apenas uma vez. E pra parar, o clearInterval.

Não sei se é isto que queria fazer:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);
    var parar = false;
    var parado = true;
    var interval;


    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }


    function desenhaCirculo(x, y, raio) {

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


    var raio = 19;
    var sentido = 0


    function atualizaTela() {

        parado = false;
        limpaTela();

        if( raio > 30) {
            sentido = -1;

        } else if (raio < 20 ) {
            sentido = 1;
        }
        raio = raio + sentido;
        desenhaCirculo(50, 50, raio);
    }


    function comece(){
        if(parado == true){         //só aciona setInterval quando parado, uma vez apenas.
            interval = setInterval(atualizaTela, 50);
        }
    }


    function pare() {
        //limpaTela();              //habilite esta linha se quiser limpar a tela ao parar
        parado = true;
        clearInterval(interval);    //limpa a variável que acelera o setInterval
        return false;               // para não exibir o menu padrão do canvas
    }

    tela.onclick = comece;

    tela.oncontextmenu = pare;

</script>