Olá a todos! A minha resolução antes de observar a opinião do instrutor foi basicamente utilizar o mesmo raciocínio que nos foi útil no exercício anterior, ficando meu código assim:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
<canvas width="600" height="400"></canvas>
</html>
<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, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
var raio = 20;
var tamanho = 1;
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
function aumentaRaio(){
limpaTela();
if (raio>30){
tamanho = -1;
} else if (raio<20){
tamanho = 1;
}
desenhaCirculo(50,100,raio);
raio = raio + tamanho;
}
setInterval(aumentaRaio,40);
</script>Dessa forma para alterar a velocidade da qual a bolinha pisca na tela fica a cargo de aumentar ou diminuir o valor do segundo parâmetro do setInterval, que obteremos uma maior ou menor velocidade de pulsação.
