Jugando con el ejercicio anterior, lo que no logré es darle la velocidad que quería.. si alguno sabe como, le agradezco.. el interval por mas que le pongo numeros chicos acelera solo hasta un punto..
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
function crearCirculo(x,y,radio, color){
pincel.fillStyle=color;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
var i=0;
var derecha=true;
var color=["red", "yellow", "green"];
var j=-1;//para que el primero sea 0
var altura=0;
function actualizarPantalla(){
limpiarPantalla();
crearCirculo(i,altura,10,color[j]);
console.log(altura);
if(i==600){
derecha=false;
}
if(i==0){
derecha=true;
j++;
altura=altura+20;
}
if(derecha){
i++;
}
else{
i--;
}
if(j==3){
j=0;
}
if(altura==400){
altura=0;
}
}
setInterval(actualizarPantalla,1);
</script>
