Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Sugerencia] Solución alternativa

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Interactuando con el usuario y actividad Cambiando de color

por Adrián Zangla
| 41.6k xp | 3 posts

De esta manera evitamos utilizar condicionales, además nos permite agregar más colores sin modificar el código.

Operador modulus: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder

Array length: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length

        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = "grey";
        pincel.fillRect(0, 0, 600, 400);

        const colores = ["blue", "red", "green"];
        let indiceColorActual = 0;

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

        pantalla.onclick = dibujarCirculo;

        function alterarColor() {
            indiceColorActual++;
            return false;
        }

        pantalla.oncontextmenu = alterarColor;
2 respuestas
por Lazaro David Espinosa Barrientos
| 127.4k xp | 22 posts
Alumini

Creo que no entiendo tu código, ¿podrías ayudarme? Lo corrí pero no cambia el color, ni deja agregar otro como comentas, tal vez estoy haciendo algo mal.

por Adrián Zangla
| 41.6k xp | 3 posts

¿Qué es lo que no funciona? Sólo compartí el código de JavaScript ¿Te aseguraste de tener la estructura de HTML correcta? Debería verse algo así

<head>

    <meta charset="utf-8">

</head>

<body>

    <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);

        const colores = ["blue", "red", "green"];
        let indiceColorActual = 0;

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

        pantalla.onclick = dibujarCirculo;

        function alterarColor() {
            indiceColorActual++;
            return false;
        }

        pantalla.oncontextmenu = alterarColor;

    </script>

</body>

Lo interesante del código es el uso del operador módulo y del atributo length del array.

pincel.fillStyle = colores[indiceColorActual % colores.length];

indiceColorActual es inicializado en 0 y con con cada click derecho se le suma 1. colores es un array y colores.length es igual a la cantidad de elementos en el array, en este caso 3. Cuando operamos indiceColorActual % colores.length vamos a obtener el resto de indiceColorActual/colores.length, y lo utilizamos como índice del Array. Entonces siempre vamos a tener un número entre 0 y 2.

Por ejemplo 0%3 = 0; 1%3 = 1; 2%3 = 2; 3%3 = 0 4%3 = 1 y así...

Si agregamos más colores, el atributo length cambiaría para obtener siempre un número dentro del rango de índices correctos para el array.