<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) {
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
function atualizaTela() {
while(x <= 600){
limpaTela();
desenhaCirculo(x, 20, 10);
x++
break;
}
}
setInterval(atualizaTela, 10);
</script>
1
resposta
resposta
No caso, se eu somente quisesse parar a bolinha e mostrando constantemente só ela indo e parando, como eu faria o loop dessa função?
Olá Fernando, tudo bem com você?
Perdão pela demora! Acredito que já tenha compreendido o problema, mas é sempre bom deixar de base para outros alunos que venham a ter essa dúvida :)
Não entendi o que você quis dizer com ela ir indo e parando, se quis dizer até uma posição do canvas e depois voltar aparecer no inicio?
Observei que você utilizou, entretanto esse código não há como ser feito utilizando loops, porque precisamos constantemente atualizar a tela com o setInterval e a cada execução iriamos criar um novo while com valores diferentes, o que pesa bastante a página, inclusive alguns navegadores iriam para pedir para interromper a execução
O segundo problema é que para fazer de 20 a 600 sem o setInterval usando while demora menos de meio segundo, então seria impossível ver na tela a execução pois iria rapidamente passar de um lado para o outro, eu fiz um pequeno teste e após o navegador interromper a execução da página conseguimos observar a posição da bolinha.
Então por mais que esse exercício caber um loop o ideal é adotar a alternativa utilizada pelo instrutor, dessa forma garantimos que teremos uma atualização constante e que não iremos sobrecarregar o navegador
Abraços e Bons Estudos!