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
1
respuesta

[Proyecto] function para clickDerecho (usando SWITCH)

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 Estudiante
| 109.9k xp | 38 posts

Cualquier duda que tengan pueden contactarme por LinkedIn haciendo click aquí

<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(e) {
      var x = e.pageX - pantalla.offsetLeft;
      var y = e.pageY - pantalla.offsetTop;
      console.log(e);
      alert("x = " + x + " ; y = " + y);
   }

   var i = 0
   var color = ["blue", "white", "blue"]
    function cambiarColor() {
      var colores = [["red", "white", "red"], ["green", "white", "green"]]
      i += 1
      switch (i) {
         case 1:
            color = colores[0]
            break;
         case 2:
            color = colores[1]
            break;
         case 3:
            i = 0;
            color = ["blue", "white", "blue"]
            break;
      }
        return false
   }

   function dibujarCirculo(e) {
      var x = e.pageX - pantalla.offsetLeft;
      var y = e.pageY - pantalla.offsetTop;
      let colores = color
      let radio = 30;
      for (j = 0; j < 3; j++) {
         pincel.fillStyle = colores[j]
         pincel.beginPath()
         pincel.arc(x, y, radio, 0, 2 * 3.14)
         pincel.fill();
         radio -= 10
      }
   }

   // pantalla.onclick = exibirAlerta;
   pantalla.onclick = dibujarCirculo;
   pantalla.oncontextmenu = cambiarColor

</script>

Resultado código - Dibujando "ONE"

1 respuesta
por Hector Francisco Diaz Batista
| 83.3k xp | 41 posts

Excelente bro! También lo resolví con un switch, pero de una manera un poco diferente, te dejo mi código 

<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); 
    var colores = ["blue", "red", "green"];
    var indiceColorActual = 0; // comienza con blue

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

    function alterarColor() {

        switch(indiceColorActual < colores.length) {

            case 0:
                    colores[0]
                break;
            case 1:
                    colores[1]
                break;

            default:
                    colores[2]
                    if(indiceColorActual == 2){
                        indiceColorActual = 0;
                    }else{
                        indiceColorActual++;
                    }
                break;
        }

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


    pantalla.onclick = dibujarCirculo;
    pantalla.oncontextmenu = alterarColor;

</script>