1
resposta

O pulso....não pulsa!

Fiz dessa forma, e não deu certo. Quem puder me esclarecer onde eu errei... tem outra forma de fazer sem usar o fator de crescimento?

Obrigado!

<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, cor) {

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

    function atualizaTela() {

        limpaTela();

        if(raio > 30) {
            raio=raio--;
        } else if (raio < 20) {
            raio=raio++;
        }


        desenhaCirculo(300, 200, raio, 'blue');

    }

    setInterval(atualizaTela, 20);

</script>
1 resposta

Olá Ricardo! Talvez não seja a pessoa mais indicada mas posso tentar te ajudar. identifiquei alguns erros no seu código. Como por exemplo você chama a função limpaTela so que ela não foi definida como função.

function limpaTela() {

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

Este é o primeiro ponto.

Segundo você esta ultilizando raio = raio++ As duas formas de ultilizar essa equação são raio++ ou raio = raio+1 .

Outro ponto importante é dar esse start para começar a contagem de 20 a 30. que deve ser ultilizada abaixo do desenhaCirculo.

 raio = raio + acrescentar;

A variável acrescentar foi definida sendo igual a 1. Sendo assim. Refiz seu codigo da assim:

<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, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }
    var raio = 20;
    var acrescentar = 1;
    function limpaTela() {

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

        limpaTela();

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

        } 
        else if (raio < 20) {
           acrescentar = +1;
        }


        desenhaCirculo(300, 200, raio, 'blue');
        raio = raio + acrescentar;

    }

    setInterval(atualizaTela, 20);

</script>