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

¡No sale el color rojo! :(

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 Carolina Avendaño Quintero
| 46.3k xp | 26 posts

Aquí mi código: Básicamente lo que hace es que al usuario dar click izquierdo salen círculos azules y al dar click derecho círculos verdes. ¡Seguiré revisando!

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programa Vólumen 4</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>
</body>
<script>
    let pantalla = document.querySelector("canvas");
    let pincel = pantalla.getContext("2d");

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

    function dibujarCirculo(evento){
        let x = evento.pageX - pantalla.offsetLeft;
        let y = evento.pageY - pantalla.offsetTop;

        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();

        console.log(x + "," + y);
    }

    pantalla.onclick = dibujarCirculo;

    let colores = ["blue", "red", "green"];
    function alterarColor(evento){
        let x = evento.pageX - pantalla.offsetLeft;
        let y = evento.pageY - pantalla.offsetTop;

        for (let i = 0; i < colores.length; i++) {
            pincel.fillStyle = colores[i];
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + "," + y);
        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script>
</html>
2 respuestas
por Carolina Avendaño Quintero
| 46.3k xp | 26 posts

Mucho me complico la vida, jajaja. Pero hay algo que no entiendo, ¿Cómo se conectan las funciones? si en la función alterarColor() en ningún momento se hace un llamado a la función dibujarCirculo()... ¿O es que se trata de que la variable pantalla tiene dentro de sí lo que realiza la función dibujarCirculi(). No entiendo cómo funciona.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programa Vólumen 4</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>
</body>
<script>
    let pantalla = document.querySelector("canvas");
    let pincel = pantalla.getContext("2d");

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

    let 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];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {

        /*
        if(indiceColorActual < colores.length){
            indiceColorActual++;
        }else{
            indiceColorActual = 0;
        }
        */

        indiceColorActual++;
        if(indiceColorActual>= colores.length) {
             indiceColorActual = 0; //vuelve para el primer color, blue
        }

        alert(indiceColorActual);

        return false; //menú contextual padrón de `canvas` no sea exhibido
    }

    pantalla.oncontextmenu = alterarColor;

</script>
</html>
por Ingrid Silva
| 2052.2k xp | 6733 posts
Instructor

Hola Carolina , espero que esté bien.

El color rojo aparece .Al hacer clic con el botón derecho, muestra el índice que representa el color (0- blue , 1- red, 2-green)

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

Esta parte del código hace el color cambiar, atraves del un array de los colores.

Toma en cuenta que dentro de la función dibujarCirculo define el color pasado para pincel.fillStyle, usando el índice del array de colores. Para obtener un color del array necesita de su índice (posición), la primera vez que el usuario abre la aplicación el valor del indiceColorActual es 0, que es el índice para el color blue.

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