<canvas width="800" height="600"></canvas>
<script>
function dibujarCanvas(){
pincel.fillStyle = colorCanvas[marcadorCanvas];
pincel.strokeStyle = "black";
pincel.fillRect(0,0,800,600);
pincel.strokeRect(0,0,800,600);
}
function dibujarCirculo(x,y,radio){
pincel.fillStyle = colorCirculo[marcadorCirculo];
pincel.strokeStyle = "black";
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
pincel.stroke();
}
function limpiarPantalla(){
pincel.clearRect(0,0,800,600);
dibujarCanvas();
}
function escribitTexto(frase){
pincel.font = "70px Georgia";
pincel.fillStyle = "white";
pincel.strokeStyle = "black";
pincel.fillText(frase,100,300);
pincel.strokeText(frase,100,300);
}
function alternarColorCirculo(){
marcadorCirculo ++;
if (marcadorCirculo==colorCirculo.length){
marcadorCirculo=0;
}
return false;
}
function alternarColorCanvas(){
marcadorCanvas ++;
if (marcadorCanvas==colorCanvas.length){
marcadorCanvas=0;
}
return false;
}
function actualizarPantalla(){
limpiarPantalla();
dibujarCirculo(x,y,radio);
escribitTexto(contadorVueltas + texto);
if(banderaX){
x++;
if(x==limiteX){
banderaX=false;
banderaY=true;
}
}
if(banderaY){
y++;
if(y==limiteY){
banderaY=false;
banderaXflip=true;
}
}
if(banderaXflip){
x = x - 1;
if(x==radio){
banderaXflip=false;
banderaYflip=true;
}
}
if(banderaYflip){
y = y - 1;
if(y==radio){
banderaYflip=false;
banderaX=true;
contadorVueltas++;
}
}
}
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
var radio = 90;
var texto = " vueltas completas";
var colorCirculo = ["blue","red","green","purple"];
var colorCanvas = ["orange","lightgrey","lightblue","pink"];
var x = 1 * radio;
var y = 1 * radio;
var limiteX = 800 - radio;
var limiteY = 600 - radio;
var marcadorCanvas = 0;
var marcadorCirculo = 0;
var contadorVueltas = 0;
var banderaX = true;
var banderaY = false;
var banderaXflip = false;
var banderaYflip = false;
setInterval(actualizarPantalla,5);
pantalla.onclick = alternarColorCanvas;
pantalla.oncontextmenu = alternarColorCirculo;
</script>