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

[Sugerencia] hice este codigo para practicar, pero en vez de hacer la circunferencia hice un cuadrito, el problema es que hace su recorrido, pero no vuelve ni tampoco se elimina el anterior punto, alguien sabe porque?

<canvas width="600px" height="400px">
</canvas>
<script>
        var pantalla= document.querySelector("canvas");
        var pincel= pantalla.getContext("2d");

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

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

    function dibujarCuadrito(x,y,base,altura){
        pincel.fillStyle="blue";
        pincel.rect(x,y,base,altura);
        pincel.fill();
    }
    var x= 0;
    var incOrDecr= 1;

    function zigzagcube (){
    limpiarPantalla();
    if(x >600){
        incOrDecr=-1;
    }else if(x < 0){
        incOrDecr= 1;
    }
    dibujarCuadrito(x,20,50,10);
        x= x + incOrDecr;
    }
    setInterval(zigzagcube,20);



</script>
1 respuesta

Hola Marcos!

Para solucionar tu problema, hice dos pequeños cambios en tu código, la primera en la función dibujarCuadrito agregué la línea pincel.beginPath(); y en la función limpiarPantalla la alteré y dejé así:

function limpiarPantalla(){
            pincel.clearRect(0,0,600,400);
            pincel.fillStyle="lightgrey";
            pincel.fillRect(0,0,600,400);
        }

para mantener el fondo gris claro y el rectángulo azul dar la impresión de estar moviéndose.

Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios