1
resposta

O pulso ainda pulsa e muda de cor.....

Durante o processo de aumento e diminuição do raio, fiz a bolinha mudar de cor, ficou legal.

<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();
    }

    function limpaTela() {

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

    var raio = 20;
    var sentido = 1;
    var cor = ['black','blue','red'];
    var indiceAtual = 0;


    function pulsa () {

        if(raio>30){
            sentido=-1;
            indiceAtual=2;
        }else if(raio<20){
            sentido=1;
            indiceAtual=0;
        }
        if(raio==25){
            indiceAtual=1;
        }

        limpaTela();
        desenhaCirculo(200,200,raio,cor[indiceAtual]);
        raio=raio+sentido;

    }

    setInterval(pulsa, 20);

</script>
1 resposta

Muito bom!

Obrigado por compartilhar seu código com a gente, aprendo muito vendo o trabalho dos outros. Parabéns pela sua dedicação.

Abraços e bons estudos!!