Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] Al intentar los códigos no pude hacerlos funcionar

Al intentar los códigos de compañeros e inclusive el sugerído no logre comopilarlo así que busque otra solución que me sirvio, de igual manera no entiendo muy bien el funcionamiento de colorActual = (colorActual + 1) % colores.length;, solo entoendo que me retornara mi array a 0 una vez que sea finalizado, me gustaría que me apoyesen porfavor, ya que si me siento un poco perdido.

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

<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 colorActual = 0;

    function dibujarCirculo(evento){
        let x = evento.pageX - pantalla.offsetLeft;
        let y = evento.pageY - pantalla.offsetTop;  
        let coloractual = colores[colorActual];
        pincel.fillStyle = coloractual;
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*Math.PI);
        pincel.fill();
        console.log(x + "," + y);

        colorActual = (colorActual + 1) % colores.length;
    }

    pantalla.onclick = dibujarCirculo;
</script> 
1 respuesta

Lo que hace % es dividir dos numeros y enregarte su residuo, al llegar al final del array, se divide el numero de posiciones entre si, lo que deja cero residuo.

Te recomiendo que dividas las funciones en dos, una encargada de dibujar el circulo y la otra para cambiar el color, ya que de la forma que lo hiciste cambiaria el color solo al dibujar el circulo.

puedes utilizar esta funcion:

function alterarColor() {


        *Tu codigo*


        return false;
    }

    pantalla.oncontextmenu = alterarColor;

oncontextmenu sirve para regristrar el click derecho y con el return false estamos cancelando el menu que nos sale al presionar dicha tecla, lo que lo hace el adecaudo para el ejercicio.