<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CIRCULO EN MOVIMIENTO</title>
</head>
<body>
<h1>Circulo en movimiento</h1>
<canvas width="600" height="400"></canvas>
<script>
var lienzo = document.querySelector('canvas');
var pincel = lienzo.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0,600,400);
function dibujarCirculo(x,y,radio){
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarLienzo(){
pincel.clearRect(0,0,600,400);
}
var x = 30;
var sentido = 1;
function mostrarCirculo(){
limpiarLienzo();
if(x > 570){ //gracias por la ayuda, profesor.
sentido = -1;
}else if(x < 30){
sentido = 1;
}
dibujarCirculo(x,20,15);
x = x + sentido;
}
setInterval(mostrarCirculo,5);
</script>
</body>
</html>
