<!DOCTYPE html>
<html lang="en">
<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>Círculos</title>
</head>
<body>
<h1>Círculo va y regresa eternamente</h1>
<canvas
width ="600"
height="400">
</canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "grey";
pincel.fillRect(0,0,600,400);
var colores = ["red","green", "blue"];
var miColor = 0;
var detectorMax = false;
var x = 0;
function dibujarCirculo(x, y, radio){
pincel.fillStyle = colores[miColor];
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
function actualizarPantalla(){
limpiarPantalla();
if(x == 600){
detectorMax = true;
}
if(x == 0){
detectorMax = false;
}
if (!detectorMax){
x++;
} else{
x--;
}
dibujarCirculo(x, 20, 10);
}
setInterval(actualizarPantalla, 10);
</script>
</body>
</html>
