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>