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)
2
respuestas

[Duda] Indicador de color mediante alert

Quiero que cada que hago click aparezca un alert indicando el color seleccionado, pero solo puedo hacerlo con el azul (color actual en 0) y rojo (cualquier color del loop antes de llegar a 0). ¿Cómo hago para agregar más mensajes?

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 
    var colores = ["blue", "red", "green"];
    var indiceColorActual = 0; // comienza con blue

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;    
        pincel.fillStyle = colores[indiceColorActual];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

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

    pantalla.oncontextmenu = alterarColor;



</script> 
2 respuestas

Hola Kevin, espero que estés bien.

solución!

Para agregar más mensajes, lo que puedes hacer es utilizar una estructura de control como if o switch para verificar el valor de indiceColorActual y mostrar un mensaje correspondiente a cada color. Por ejemplo, si agregas el color "yellow" en la lista de colores, puedes agregar el siguiente código dentro de la función alterarColor:

if(colores[indiceColorActual] === "blue") {
    alert("blue");
} else if(colores[indiceColorActual] === "red") {
    alert("red");
} else if(colores[indiceColorActual] === "green") {
    alert("green");
} else if(colores[indiceColorActual] === "yellow") {
    alert("yellow");
}

Este código revisa el valor de indiceColorActual y muestra un mensaje correspondiente a cada color. Puedes agregar más bloques else if para cada color que agregues en la lista.

Cuéntame si te funcionó.

¡Saludos!

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