Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

[Duda] Ayuda

hola tengo una duda, ¿porque después de recorrer el array no vuelve a comenzar, es decir, hago uno con azul, otro con rojo y otro con verde, pero luego vuelvo a dar click derecho y no vuelve ha azul.

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    var colores = ["blue" , "red" , "green"]
    indicadorDeColor = 0;

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


    function dibujarCirculo (evento) {

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(x,y)

        pincel.fillStyle = colores[indicadorDeColor];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
    }

    function clickDerecho () {

        indicadorDeColor++

        if (indicadorDeColor >= colores) {

            indicadorDeColor = 0;
        }

        return false;
    }

    pantalla.onclick = dibujarCirculo;
    pantalla.oncontextmenu = clickDerecho;



</script>
3 respuestas

¡Hola Nelson!

El problema que estás teniendo es que en la función "clickDerecho" estás comparando el índice del color con el array "colores" en lugar de compararlo con el tamaño del array "colores". Por lo tanto, nunca se reinicia a cero y nunca vuelve a comenzar en el primer color.

Para solucionarlo, debes cambiar la condición en la línea 21 de tu código de esta manera:

if (indicadorDeColor >= colores.length)

De esta forma, el índice del color se reiniciará a cero después de que se haya recorrido todo el array de colores y volverá a comenzar con el primer color.

Espero que esto te ayude a resolver tu duda.

¡Saludos!

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

gracias, aprovechando la consulta otra duda, yo intente hacerlo muchas veces con un loop especificamente con el for, pero siempre me queda con la duda de que poner como después de los corchetes ejemplos

for (i =0; i >= colores.lenght; i++) {
  // aqui ya no sabia que poner. 
}

me quedaba en la luna.

Lo que pasa es que el for ejecutará los n tiempos completos, es decir, cambiará los colores 3 veces y luego terminará entregandote un valor final, dependiendo de lo que escribas en esa parte, si bien, no es imposible, recordemos que buscamos respuestas sencillas y fáciles de seguir por lo que usar un foor loop para este ejercicio, no es muy práctico, por otro lado, el if, es una condicional, es decir que solo actúa una vez para evaluar tu condición y no vuelve a ejecutarse a menos que vuelvas a llamarla.

Entonces, no responde la pregunta a cómo meter un for, pero te ayudo a recordarte que busquemos soluciones prácticas.

Ánimo!