Juntei o que foi ensinado no exercício anterior com o sugerido nesse tópico. O resultado foi uma bolinha vermelha pulsante, dando uma voltinha.
Meu código:
<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();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 50;
var y = 50;
var sentido = 1;
var raio = 20;
var zoom = 1;
function zoomCirculo () {
limpaTela ();
desenhaCirculo (x, y, raio, "red");
raio = raio + zoom;
if (raio > 30) {
zoom = -1;
} else if (raio < 20) {
zoom = 1;
}
if (x >= 50 && x < 550 && y == 50) {
y = y;
x = x + sentido;
} else if (x >= 550 && y >= 50 && y < 350) {
x = x;
y = y + sentido;
} else if (y >= 350 && x <= 550 && x > 50) {
y = y;
x = x - sentido;
} else if (x == 50 && y > 50 && y <= 350) {
x = x;
y = y - sentido;
}
//console.log (x, ",", y);
}
setInterval (zoomCirculo, 10);
</script>