Gostaria de saber se para esse exercício seria possível utilizar o for?
Solucionado
Gostaria de saber se para esse exercício seria possível utilizar o for?
Para esse exercício não cabe o FOR como parte da resposta.
Não precisa do for por que o setInterval ele serve como um for por assim dizer só que infinito pois ele vai atualizar a tela de tempos em tempos, Abaixo tem um projetinho dessa bolinha pulsante indo para um lado e para o outro infinitamente.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
</html>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'beige';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
var raio = 10;
var pulsoRaio = 1;
var sentido = 1;
function atualizaTela() {
limpaTela();
desenhaCirculo(x, 30, raio, 'blue');
if (x > 600) {
sentido = -1;
}
else if (x < 0) {
sentido = 1;
}
x += sentido;
if(raio > 30){
pulsoRaio = -1;
}
else if(raio < 20){
pulsoRaio = 1;
}
raio += pulsoRaio;
}
setInterval(atualizaTela, 20);
</script>