2
respuestas

[Duda] Que me falto

no e podido estudiar como quisiera tengo intermitencias en mi servicio de internet pero vamos paso a paso. Este es mi código tuve dificultades si alguien me pudiese ayudar a saber que es lo que me falta como puedo reforzar ese conocimiento si alguiente puede ayudarme para tener mejor comprensión o si me recomienda alguno ejercicos para saber en que fallo.

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

        function exibirAlerta(evento){
            var x= evento.pageX;- pantalla.ofoffsetLeft;
            var y= evento.pageY;-pantalla.offsetTop;

            console.log(evento);
            alert(x + "," + y );

        }

        function DibujarCirculo(evento){
            var x= evento.pageX;- pantalla.ofoffsetLeft;
            var y= evento.pageY;-pantalla.offsetTop;

            pincel.fillStyle= alterarColor;
            pincel.beginPath();
            pincel.arc(x,y,10,0,2*3.14);
            pincel.fill();
            console.log(x+","+y);
        }

        function alterarColor(oncontextmenu){
            alert("funciono");
            //return false;
            var cambiarColor = 0 
            for (var color = 0 ; color.length<=2; color++){
                cambiarColor = cambiarColor + color;


            }

        }

        var colores = ["blue","red","green"];


        //pantalla.onclick = exibirAlerta;
        pantalla.onclick=DibujarCirculo;
        pantalla.oncontextmenu=alterarColor;


</script>
2 respuestas

Hola, no te preocupes al igual que tu, tambien ando atareado pero vamos paso a paso si podemos lograrlo, viendo tu codigo yo estaba intentanto hacer algo parecido pero no me funciono, lo que puedo decir es que en tu codigo dentro de la funcion dibujarCirculo el color que estas "DESIGNANDO" no es un color ya que estas mandando a llamar a la otra funcion. que puede estar bien peroo, el error está en que al accionar el evento oncontextmenu (clic derecho), tambien llama a la funcion de AlterarColor por lo tanto estas llamando a llamar la funcion al mismo tiempo y esto esta chocando. Una solucion que yo pense es que solo mandes a llamar la funcion alterarColor cuando des clic derecho, pero significa que al ejecutar esta dicha funcion mande como parametro el color a la funcion DibujarCirculo.

Otra cosa que pude notar que el ciclo que utilizas dentro de la funcion de alterarColor esta mal.

No quiero confundirte mas y la verdad el metodo que quisiste utilizar tambien se me complico, pero en mi caso solo hice algo mas sencillo, genere un array donde almaceno los colores y una variable que me indica el indice del array donde se encuentra, entonces dentro de la funcion de alterarColor, solo aumento el indice y cuando sea mayor a 2 lo reinicio a 0 para que repitan los colores. :D Suerte te dejo mi codigo para que lo cheques

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

<script>
    //             0       1      2
  var colores = ['blue', 'red', 'green']; //Declarar arreglo para almacenar los colores 
  var indice = 0; //declarar variable para moverme dentro del array 
  var pantalla = document.querySelector('canvas');
  var pincel = pantalla.getContext('2d');
  pincel.fillStyle = 'grey';
  pincel.fillRect(0, 0, 600, 400);

  function dibujarCirculo(evento) {
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
    pincel.fillStyle = colores[indice]; // trae el valor del array con el valor actual del indice 
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2 * 3.14);
    pincel.fill();
    console.log(x + ',' + y);
  }

  function alterarColor(evento) {
    alert("Usted a cambiado de color"); //alerta para cliente 
    //ciclo para ir cambiando de colores
    if (indice < 2) { //condicion para reiniciar el indice cuando sea mayor a 2 
      indice++;
    } else {
      indice = 0; // reiniciar el indice 
    }
    return fale;
  }

  pantalla.onclick = dibujarCirculo;
  pantalla.oncontextmenu = alterarColor; //ejecutar funcion al detectar clic derecho
</script>

gracias sigo tratando de mejorar pero aun no se el como hacer ya que llego a un punto y de ahí ya no puedo pasar y quizá lo que para muchos le lleva minutos a mi me toma horas y trato de ver como hacerle para que funcione