Hola,
Creo que mas o menos quedo pero aun tengo un problema, mi circulo regresa e un salto muy grande y no decrementando como esperaria, alguien que me pueda ayudar con esto!! lo agradeceria mucho.
<canvas width="600" height="400"> </canvas>
<script>
//esta es el tamaño de la pantalla en la que se movera la circunferencia
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
//en este me diseña mi circulo es el color y su tamaño tambien
function disenharCircunferencia(x,y,radio){
pincel.fillStyle = "blue";
pincel.beginPath();
pincel.arc(x,100,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
//la posicion en donde iniciara la circunferencia será 50...
var x = 50;
//se va a crear una variable para que esta decremente y vuela a la posicion inicial y una final para su inicio de otra variable
var derechaizq = 1;
//Esta funcion me actualiza el circulo y lo va moviendo hacia la derecha mientras mi funcion limpiar me elimina el lugar anterior en el que estuvo el circulo
function actualizarPantalla(){
limpiarPantalla();
if( x > 300){
derechaizq = -100;
}else{
derechaizq = 1;
}
disenharCircunferencia(x,20,10);
x = x + derechaizq;
}
setInterval(actualizarPantalla,10);
//la funcion tiene que hacerme que mi circunferencia no llegue al limite de mi canvas, tiene que ir en sentido contrario al que va en este caso de derecha a izquierda
</script>