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

Duda

Hola como estan? como hacen para que al dar clic derecho les aparezcan los diferentes colores ya lo he intentado varias veces y me salen las opciones del navegador en vez de cambiar de color dejo mi codigo por aqui y muchas gracias por leerme!

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!--Es para hacer un lienzo-->
    <canvas width="600" height="400"></canvas>

    <script>
      var pantalla = document.querySelector("canvas");//conectando el canvas a JS (se crea la variable pantalla)
      var pincel = pantalla.getContext("2d");//2d ya que son 2 dimensiones
      //para definir un color de todo el Canvas
      pincel.fillStyle = "gray"; //propiedad
      pincel.fillRect(0,0,600,400); //funcion
      var colores = ["blue","red","green"];
      var index = 0;


      function exibirAlerta(evento){
        //event.pageX (Y) da coordenadas de toda la pantalla
        //pantalla.offset para referirse a lo que este fuera del canvas
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento); //evento son las propiedades del clic
        alert(x + "," + y);
      }
      function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        pincel.fillStyle = colores[index];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);
      }

      //para hacer clic en el canvas y mostrar la alerta
      //pantalla.onclick = exibirAlerta;
      pantalla.onclick = dibujarCirculo;

      function alterarColor() {
        index++
        if (index >= colores.length){
        index = 0;
        return false;
          }
        }

      pantalla.oncontextmenu = alterarColor;


    </script>

  </body>
</html>
1 respuesta

Hola! fijate que tienes el "return false;" dentro del if, deberia quedarte fuera.

Lo tienes asi:

 function alterarColor() {
        index++
        if (index >= colores.length){
        index = 0;
        return false;
          }
        }

Si lo dejas fuera del if entonces si te funcionara y no te dara las opciones del navegador

 function alterarColor() {
        index++
        if (index >= colores.length){
            index = 0;
        }
        return false;

        }