Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

El color siempre sale azul

Hola! tengo la duda de por que me sale el color azul siempre, en que me confundí en el codigo, muchas gracias!

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = 'grey'; //fondo
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = "red";
    pincel.fillRect(0,0,50,50);

    pincel.fillStyle = "green";
    pincel.fillRect(50,0,50,50);

    pincel.fillStyle = "blue";
    pincel.fillRect(100,0,50,50);

    var color = "blue";
    var puedoDibujar = false; //inicializacion de variable como falsa


function cambiaColor(evento) {

        var x = evento.pageX - pantalla.offsetleft;
        var y = evento.pageY - pantalla.offsetTop;

        if(x < 50 && y < 50){
            color="red";
        }

            if((x > 50 && y < 50) && (x < 100 && y < 50)) { 
            color="green";
        }

                if((x > 100 && y < 50) && (x < 150 && y < 50)) {
            color="blue";
        }


 }

    //creacion del circulo para dibujo

    function dibujarCirculo(evento) { 

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;

            if(y > 50) {

            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }

}



    //si la variable es verdadera se habilita el dibujo del circulo

    function habilitarDibujar() {

        puedoDibujar = true;

    }



    //si la variable es falsa se deshabilita
    function deshabilitarDibujar() {

        puedoDibujar = false;

    }


    pantalla.onclick = cambiaColor;

    pantalla.onmousemove = dibujarCirculo; // permite capturar el movimiento del mouse


    pantalla.onmousedown = habilitarDibujar; //ejecuta el codigo cuando el mouse está presionado

    pantalla.onmouseup = deshabilitarDibujar;// ejecuta el codigo cuando se suelta el boton del mouse







</script>
3 respuestas

Aylen, tiene un error de escritura en cambiarColor:

var x = evento.pageX - pantalla.offsetleft

Debe ser así: offsetLeft y lo tienes en minúscula

var x = evento.pageX - pantalla.offsetLeft;

muchas gracias!! me aparecia un error en esa funcion pero no sabia cual era! mil gracias!!!

En la consola en general te dice el numero de linea donde ocurre un error, pero en este caso no lo indica ya que para JavaScrip al no existir lo que escribiste únicamente regresa un NaN. (Not-A-Number)

Yo lo solucione así.

var y = evento.pageY - pantalla.offsetTop;
            alert(x)                                      //coloque acá esto y me mostró NaN, de allí revise bien y vi el error.
            if(y > 50) {

Que bueno que ya esta corregido. Dale Solución ya que de esta forma los moderadores y alguno de los que ayudamos vemos quien necesita alguna ayuda y tratamos de hacerlo.