Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

en vez de <= colores.length // <= 2

El código propuesto en la solucion:

function alterarColor() {
        indiceColorActual++;
        if(indiceColorActual>= colores.length) {
             indiceColorActual = 0; //vuelve para el primer color, blue
        }
        return false; //menú contextual padrón de `canvas` no sea exhibido
    }

Mantiene el color verde durante dos clicks, ya que length tiene un valor de 3 y los indices comienzan a contar desde 0, por lo que el máximo índice va a ser 2 en este caso, haciendo que el verde se repita dos veces antes de reconfigurarse a 0. Más prolijo quizas sería definir una variable arrayLength que contenga colores.length - 1 y hacer la comparación.

Codigo propuesto para arreglarlo:

function alterarColor() {
        indiceColorActual++;
        if(indiceColorActual>= colores.length) {
             indiceColorActual = 0; //vuelve para el primer color, blue
        }
        return false; //menú contextual padrón de `canvas` no sea exhibido
    }
    colores = ["blue", "red", "green"]
    var arrayLength = colores.length- 1
4 respuestas
solución!

hola, Florencia !! El contador comienza en 0, azul. Pregunta: 0 >=3?

False. Pinta azul. Incrementa en 1. Queda en 1.

Pregunta: 1>=3?

False. Pinta rojo. Incrementa en 1. Queda en 2.

Pregunta: 2>=3?

False. Pinta verde. Incrementa en 1. Queda en 3.

Pregunta: 3>=3?

True. Pinta azul. Incrementa en 1.

Nunca repite el verde.

Lo q se repite ad infinutum es el azul. Eso se puede solucionar con un FOR, me parece que solo permita el ciclo hasta el 3 y que si es 3 vuelva al 0 inicial y repita el ciclo. Ahora, igual, leo tu código a ver si lo entiendo y te comento.

Bueno, leí tu código. Dos cosas:

1) Definiste una variable pero nonla usaste dentro de la condición. En vez de colores.length tendrias que haber puesto Array.length.

2) Cuando llamás a la función y se ejecuta, mirá cómo queda:

El contador comienza en 0, azul. Pregunta: 0 >=2?

False. Pinta azul. Incrementa en 1. Queda en 1.

Pregunta: 1>=2?

False. Pinta rojo. Incrementa en 1. Queda en 2.

***Pregunta: 2>=2?

False. Vuelve a pintar de azul y nunca pinta en verde.***

Saludos. Que estés bien.

Hola Gabriela! gracias por el feedback, ahi copié todo el código de la solución y efectivamente no repite el verde, creo que lo repetía en mí código que era un híbirido del código propuesto y el mio jaja. Sobre la parte de mi código no me di cuenta y lo pegué con ese error! perdón, generó confusión. Finalmente hice mi propia versión, un poco mas larga pero funciona :)

  const pantalla = document.querySelector("canvas");
  const pincel = pantalla.getContext("2d");

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


  function exibirAlerta(evento) {
    const x = evento.pageX - pantalla.offsetLeft;
    const y = evento.pageY - pantalla.offsetTop;
    alert(x + " " + y)
  }

  function dibujarCirculo(evento) {
    const x = evento.pageX - pantalla.offsetLeft;
    const y = evento.pageY - pantalla.offsetTop;
    pincel.fillStyle = colores[indiceColor]
    pincel.beginPath();
    pincel.arc(x,y,10,0,2*3.14)
    pincel.fill();
    console.log(x + ', ' + y);
  }
  function alterarColor() {
    if (indiceColor >= arrayLength) {
      indiceColor = 0
    } else {
      indiceColor++
    }
    return false;
  }

  let colores = ["blue", "red", "green"]
  let arrayLength = colores.length -1
  let indiceColor = 0
  pincel.fillStyle = colores[indiceColor];
  //pantalla.onclick = exibirAlerta;
  pantalla.onclick = dibujarCirculo
  pantalla.oncontextmenu = alterarColor;

*¡¡¡¡Eso es lo hermoso, Flor, de la programación, que no hay un solo camino para llegar a destino!!!!!