Buenas noches, estuve practicando con los circulos de colores y en este ejercicio con setInterval, me propuse unir los dos ejercicios ultimos y me salio algo interesante y se los presento :
<canvas height="400" width="600" ></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel= pantalla.getContext("2d");
//pintamos nuestra pizarra
pincel.fillStyle="lightgray"; //propiedad
pincel.fillRect(0,0,600,400);//funcion
function disenarCircunferencia (x,y,radio){
pincel.fillStyle=colores[indice];;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
var x=50;
var colores=["blue","red","green"];
var indice =0;
function actualizarPantalla(color){
limpiarPantalla();
disenarCircunferencia(x,20,10);
if(x==600 ){
limpiarPantalla();
x=50;
indice++;
if(indice >= colores.length){
indice=0;
}
return false;
}
x++;
}
//setInterval es para poder poner el tiempo de transicion
setInterval(actualizarPantalla,10);
</script>
Sugerencias para mejorar el codigo y sea aun mas limpio??.