Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Ya va que vuela

<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 limpiarPantalla(){

        pincel.clearRect(0,0,600,400);
    }
    var x = 0;
    var sentido = 1;
    function actualizarPantalla(){
        limpiarPantalla();
        if(x > 600){
            sentido = -1;
        }else if(x < 0){
            sentido = 1;
        }
        disenharCircunferencia(x,20,10);
        x = x + sentido;
    }    
    setInterval(actualizarPantalla,5);
</script>
1 respuesta

¡Hola Gerardo!

El código que compartiste es un ejemplo de animación en JavaScript utilizando el elemento canvas de HTML. En este caso, se dibuja una circunferencia que se mueve de izquierda a derecha en la pantalla.

El código es bastante sencillo y fácil de entender. Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartatucodigo) y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.