Solucionado
Olá,
No vídeo 2 da aula 4 é explicado que quando você adiciona o clear.rect, ele limpa a tela do canvas. E nesse processo, produz uma animação quase instantânea que "move" o círculo até o outro canto do canvas.
Mas como ele faz isso só limpando a tela? Como ele apaga toda a sequência de bolinhas (se não apagasse ficaria só aquela linha azul) mas deixa a última só com o comando de limpar o canvas?
O que eu não entendi é como o código executa essa ação.
Oi Lucas tudo bem?
O pincel.clearRect(0, 0, 600, 400); apaga a tela se não veríamos um rastro de bolinha azul.
Veja como ficaria o código (já na aula da animação) se não limpassemos a tela.
<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() {
//limpaTela();
desenhaCirculo(x, 20, 10);
x++;
}
setInterval(atualizaTela, 10);
</script>Espero ter ajudado!!!
Boa noite, Lucas! Como vai?
Mas como ele faz isso só limpando a tela? Como ele apaga toda a sequência de bolinhas (se não apagasse ficaria só aquela linha azul) mas deixa a última só com o comando de limpar o canvas?
Respondendo suas perguntas, na realidade não é o clearRect() que faz a animação! Ele é apenas uma parte de todo o processo que permite limpar a tela de forma que não fique um rastro azul no canvas! Daí, como o processo de apagar a canvas com o clearRect() e desenhar uma nova bolinha acontece muito rápido, acabamos tendo essa visualização de algo animado!
Pegou a ideia? Qualquer coisa é só falar!
Grande abraço e bons estudos, meu aluno!
Ah sim, entendi! Muito obrigado pelas respostas, André e Gabriel!
Por nada, Lucas! Sempre que precisar de alguma ajuda é só mandar aqui no fórum da Alura!
Grande abraço e bons estudos, meu aluno!
Disponha e bons estudos!!!