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

Como logro simplificar que muestre el nombre del color actual?

Inclui 3 "if" para lograr mostrar el nombre del color actual en lugar de el numero del array, pero pienso que es muy largo. Hay manera de simplificarlo?

<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 color = ["blue","red","green"];
    var currentColor = 0;

    alert("Blue");

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

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        currentColor++;

          if (currentColor == 1){
            alert("Red");
        }
         if (currentColor == 2){
            alert("Green");
        }
        if (currentColor >= color.length){
            currentColor = 0
            alert("Blue");
        }
        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script> 
2 respuestas

Hola Stefano, te muestro mi código, espero te ayude para verlo desde otro punto de vista

function cambiarColor (evento){

        colorSelect ++;

        if (colorSelect == 3){

            colorSelect = 0;

        }
        alert (colores[colorSelect]);
        return false;
    }

Si tienes una duda, con gusto te ayudo.

Hola, no es necesario que utilices un if para cada valor posible, en realidad es suficiente con que pongas un único alert y accede directamente al valor del array donde definiste los colores, recuerda que es una variable global y puedes acceder a ella cuando quieras; por otro lado para que la variable currentColor no siga aumentando más allá del número de elementos del array de colores, se debe validar primero con un if de tal manera que si el contador ya es igual a la longitud del array se vuelva a reiniciar (no >= porque de esta manera en realiad no hay forma de que sea mayor, pero si quieres puedes ponerlo, eso no afecta). De esta forma la función alterarColor quedaría de la siguiente manera:

function alterarColor() {
        currentColor++;
        if (currentColor==color.length){ //aquí compruebas si el contador es igual a la longitud del array
                    numeroClic=0;           //aquí reinicia el contador
        } 

        alert(color[currentColor]); //esto muestra el color actual accediendo directamente al valor del array
        return false;
}