1
resposta

Bolinhas infinitas

Olá,

Estou tentando fazer um código que fique, a cada segundo, desenhando uma bolinha na tela em um lugar aleatório. Mas toda vez que rodo, o navegador trava sem desenhar nada. Alguém pode me dizer onde estou errando, please? Segue o código:

<meta charset="utf-8" />

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

</canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    function gerarCor(opacidade = 1) {
        let r = Math.floor(Math.random() * 255);
        let g = Math.floor(Math.random() * 255);
        let b = Math.floor(Math.random() * 255);

        return `rgba(${r}, ${g}, ${b}, ${opacidade})`;
    }

    function desenharCirculo(cor, eixoXinicial, eixoYinicial, raio){

        pincel.fillStyle = cor;

        pincel.beginPath();
        pincel.arc(eixoXinicial, eixoYinicial, raio, 0, 2*3.14);
        pincel.fill();
    }

    while (true) {
        setTimeout(desenharCirculo(gerarCor, Math.round(Math.random()*600), Math.round(Math.random()*400), Math.round(Math.random()*100)), 1000);
    }
</script>
1 resposta

Troque

    while (true) {
        setTimeout(desenharCirculo(gerarCor, Math.round(Math.random()*600), Math.round(Math.random()*400), Math.round(Math.random()*100)), 1000);
    }

Por

    setInterval(function() {
        desenharCirculo(
            gerarCor(), 
            Math.round(Math.random() * 600), 
            Math.round(Math.random() * 400), 
            Math.round(Math.random() * 100)
        );
    }, 1000);