function desenhaCirculo(x, y, raio) { pincel.fillStyle='blue'; pincel.beginPath(); pincel.arc(x, y, raio, 0, 2*Math.PI); pincel.fill(); }
function limpaTela() {
///o pincel.clearRect(), indicará ao JS que ele deve limpar o retângulo todo azul que ficou na tela.
pincel.clearRect(0, 0, 600, 400)
}
var x = 20;
function atualizaTela() {
limpaTela();
desenhaCirculo(x, 20, 10)
x++;
}
setInterval(atualizaTela, 20);insira seu código aqui
Bom dia! :)
Repare que a variável xé atualizada dentro da função atualizaTela(). Toda vez que chamamos essa função para atualizar a tela, a variável x muda seu valor, e como pedimos pro JS chamar essa função atualizaTela() a cada 20 milissegundos (usando a função setInterval()), o valor dessa variável muda e, portanto, o valor passado na chamada também muda.
Se colocássemos o valor 20 direto na chamada da função desenhaCirculo() dentro da atualizaTela(), o programa desenharia o círculo sempre no mesmo lugar. Mas como estamos atualizando (incrementando) o valor da variável x antes dessa chamada, o círculo está sendo desenhado em lugares diferentes, variando no eixo X.