Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Clase: Vida a la circunferencia

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Moviendo elementos con animaciones simples y actividad Animaciones Simples

por Mabel Barera
| 308.1k xp | 604 posts
<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 diseñarCircunferencia(x,y,radio){
              pincel.fillStyle = "blue";
              pincel.beginPath();
              pincel.arc(x,y,radio,0,2*Math.PI); //- pasamos 5 parámetros: cordenadas x/y, radio, ángulo inicial, y 2*3.14
              pincel.fill();

       }


       /*for(var x = 20; x < 600; x++){

             //pincel.clearRect(0,0,600,400);
             diseñarCircunferencia(x,20,10);
       }*/

       //El loop generado por for no nos sirve, ya que necesitamos que exista una dierencia de microsegundos, entre cada circunferencia para que el ojo humano detecte el movimiento,
       //diseñarCircunferencia(40,40,20);


       function limpiarPantalla(){
              pincel.clearRect(0,0,600,400);
       }

       /*Esto es solo para visualizar el movimiento
       function exibirMensaje(){
           console.log("mostrar mensaje");
       }

       setInterval(exibirMensaje,5);*/

       var x = 0;

       function actualizarPantalla(){
           limpiarPantalla();
           diseñarCircunferencia(x,20,10);
           x++
       }

       setInterval(actualizarPantalla,100);


</script>
1 respuesta
por Guillermo Edgardo Murcia Valladares
| 199.7k xp | 249 posts

Si muy bien solo era de llamar la función: actualizarPantalla que es la que llama a limpiarPantalla ... excelente

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dibuja Circulos y luego limpia pantalla</title>
</head>
<body>
    <h1>Dibuja Circulos y luego limpia pantalla</h1>
    <h1>Vuelve a dibujar para crear la sensasión que el circulo se mueve</h1>
    <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

        function actualizarPantalla(){

            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            x++;
        }

        setInterval(actualizarPantalla,100);

    </script> 

</body>
</html>