Infelizmente não consigui resolver da forma que o professor pediu, tive por sorte por alguns momentos achando que tinha resolvido, o círculo se descolava da esquerda pra direita e da diretira até o fim da tela esqueda porém ele continuava decrementar em um loop sem fim.
Este primeiro código mostra a forma diferente de brincar com o círculo.
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animação</title>
</head>
<body>
<canvas width="1350" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "Lightgray";
pincel.fillRect(0, 0, 1350, 800);
function desenhaCirculo(x, y, raio) {
pincel.fillStyle = "black";
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 1350, 800);
}
var x = 20;
var limite = 1400;
function atualizarTela() {
if(x < limite) {
limpaTela();
desenhaCirculo(x, 50, 50)
console.log(x);
x++;
}else if(x >= limite) {
limpaTela();
desenhaCirculo(limite, 50, 50);
console.log(limite);
x = -1;
}
}
setInterval(atualizarTela, 1);
</script>
</body>
</html>
Pelo visto preciso práticar bem mais do que eu achava, goahead dude !!
