Este es el código que realizé con mi percepción, encontré el resultado pero ahora se que se podia hacer mucho mas eficiente pero estoy satisfecho con mi resolucion del problema.
Este es el código que realizé con mi percepción, encontré el resultado pero ahora se que se podia hacer mucho mas eficiente pero estoy satisfecho con mi resolucion del problema.
¡Hola Jafet!
Gracias por compartir tu código con nosotros. Parece que estás creando una animación en la que una circunferencia se mueve de izquierda a derecha y luego de derecha a izquierda en la pantalla.
En cuanto a tu pregunta, mencionas que encontraste una solución al problema, pero crees que podría ser más eficiente. Si estás buscando una forma de mejorar la eficiencia de tu código, una posible sugerencia sería utilizar una sola función para dibujar la circunferencia y pasarle los parámetros necesarios en cada llamada. De esta manera, no tendrías que repetir el código para dibujar la circunferencia dos veces.
Por ejemplo, podrías crear una función llamada "moverCircunferencia" que tome como parámetros la posición x, la posición y y el radio de la circunferencia. Luego, dentro de la función, podrías utilizar las variables "x" y "x1" para actualizar la posición x de la circunferencia en cada llamada.
Aquí te dejo un ejemplo de cómo podrías modificar tu código utilizando esta sugerencia:
<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 disenharCircunferencia(x,y,radio){
pincel.fillStyle = "blue";
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function moverCircunferencia(){
if(x<600 && x1==600){
disenharCircunferencia(x,20,10);
x++;
}
if(x==600 && x1>0){
disenharCircunferencia(x1,20,10);
x1--;
}
if(x==600 && x1==0){
x=0;
x1=600;
}
}
function actualizarPantalla(){
limpiarPantalla();
moverCircunferencia();
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
var x = 0;
var x1 = 600;
setInterval(actualizarPantalla,5);
</script>
Espero que esta sugerencia te sea útil. Si tienes alguna otra pregunta o necesitas más ayuda, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!