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

[Duda] Duda | Elegir color y pintar como pincel

Hola, termine el ejercicio, pero es diferente al del instructor y tengo dudas acerca de la forma de implementar mi código.

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

<script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        var colores = ["red","green","blue"];
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0,0,600,400);
        pincel.fillStyle = colores[0];
        pincel.fillRect(0,0,50,50); 
        pincel.fillStyle = colores[1];
        pincel.fillRect(50,0,50,50); 
        pincel.fillStyle = colores[2];
        pincel.fillRect(100,0,50,50); 

        var xDibujo;
        var yDibujo;
        var puedoDibujar = false;
        var selectorDibujo = 0;

        function dibujarCirculo (evento) {
            xDibujo = evento.pageX - pantalla.offsetLeft;
            yDibujo = evento.pageY - pantalla.offsetTop;

            if ((xDibujo > 155)||(yDibujo > 55)) {
                if (puedoDibujar) {    
                    pincel.fillStyle = colores[selectorDibujo];
                    pincel.beginPath();
                    pincel.arc(xDibujo,yDibujo,5,0,2*Math.PI);
                    pincel.fill();
                }
            }
        }

        pantalla.onmousemove = dibujarCirculo;

        function habilitarDibujar () {
            puedoDibujar = true;
        }

        function deshabilitarDibujar () {
            puedoDibujar = false;
        }

        function cambiarColor (evento) {
            xDibujo = evento.pageX - pantalla.offsetLeft;
            yDibujo = evento.pageY - pantalla.offsetTop;

            if ((xDibujo>50)&&(yDibujo>50)) {
                selectorDibujo = 0;
            }else if ((xDibujo>50 && xDibujo<100)&&(yDibujo<50)){
                selectorDibujo = 1;
            }else if ((xDibujo>100 && xDibujo<150)&&(yDibujo<50)) {
                selectorDibujo = 2;
            }
        }

        pantalla.onmousedown = habilitarDibujar;
        pantalla.onmouseup = deshabilitarDibujar;
        pantalla.onclick = cambiarColor;


</script>  

¿Es malo declarar variables a nivel global y luego solo insertarlas en las funciones sin necesidad de pasarlas como argumento en los paréntesis de las funciones? A continuación señalo el bloque de código de donde surgió mi duda.

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

        function dibujarCirculo (evento) {
            xDibujo = evento.pageX - pantalla.offsetLeft;
            yDibujo = evento.pageY - pantalla.offsetTop;

            if ((xDibujo > 155)||(yDibujo > 55)) {
                if (puedoDibujar) {    
                    pincel.fillStyle = colores[selectorDibujo];
                    pincel.beginPath();
                    pincel.arc(xDibujo,yDibujo,5,0,2*Math.PI);
                    pincel.fill();
                }
            }
        }
1 respuesta

En muchas ocasiones si no es necesario y se puede prescindir de las variables globales, debemos usar esa manera. En ultima instancia, y ultimo recurso debemos usar las variables globales. Las variables globales tienen estas características:

  • Existen durante todo el tiempo que dure tu programa.
    • Los recursos de memoria se reservan hasta el final, en cambio la memoria usada en una variable local se reciclara.
  • Necesitan tener un nombre unico, en todo el programa.
    • Lo que significa que si luego declaras una variables o función con el mismo nombre, habrá conflictos y podria sobreescribir tu variable.
  • Es más dificil localizar errores, pues tienes que rastrearlo en todo el programa, y seguir el orden de las instrucciones que llevaron a ese error. El compilador lo hará, pero te tardaras un poco más en programas complejos.

Usar variables locales nos permite reciclar memoria y facilita encontrar los errores.

Al final tu eres la que decidirá si no es posible usar las variables globales, en cada caso. Lo que mejora la eficiencia de tus programas. Para más info aqui. Un saludo, espero ta haya sido de utilidad.