Olá, pessoal! Com base nos conhecimentos de animação, resolvi criar um programa que emula uma barra de loading, conforme código abaixo:
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
//Pintando o fundo
pincel.fillStyle = 'black';
pincel.fillRect(0, 0, 600, 400);
//Pintando a borda
pincel.strokeStyle = 'white';
pincel.strokeRect(100, 175, 400, 50);
//Barra de Loading
x = 100;
y = 175;
cor = 'red';
function loadingBar() {
if(x <= 500) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, 1, 50);
x = x + 1;
} else {
alert('Loaded!')
}
}
setInterval(loadingBar, 20);
}
</script>Até aí tudo bem, o código funcionou perfeitamente. Porém, quando a função loadingBar entra na condição 'else', ele exibe o alerta, porém exibe ele eternamente, visto que x vai ser sempre igual ou maior a 500.
Para tentar solucionar fiz a seguinte alteração:
//Barra de Loading
x = 100;
y = 175;
cor = 'red';
function loadingBar() {
if(x <= 500) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, 1, 50);
x = x + 1;
} else {
alert('Loaded!')
}
return x;
}
while (x <= 500) {
setInterval(loadingBar, 20);
}
</script>Ao meu ver, deveria funcionar, mas agora a página do browser sequer recarrega para iniciar o processo de loading. Podem dizer o que está havendo?
Obrigado,
