Haz lo que hicimos en el aula

Llegó la hora de que tú sigas todos los pasos que yo realicé durante el aula. Si ya lo hiciste, excelente. Si todavía no, es importante que implementes lo que fue visto en los videos para poder continuar con la próxima aula, que tiene como pre-requisito el código que escribimos hasta aquí. En cada capítulo también puedes descargar el proyecto realizado hasta ese punto.

<canvas width ="600" height="400"></canvas>

<script>
    var intervalo=0;
    var direccion =1;
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle ="lightgrey";
    pincel.fillRect (0,0,600,400);

    function diseniarCircunferencia(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);
    }

    function actualizarPantalla() {
        limpiarPantalla();

        if (intervalo>600) {
             direccion =-1;
          }else if (intervalo<0) {
            direccion=1;
          }
            pincel.fillStyle ="lightgrey";
            pincel.fillRect (0,0,600,400);
            diseniarCircunferencia(intervalo,20,10);
            intervalo = intervalo+direccion;
    }
    setInterval(actualizarPantalla,5)

</script>