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

Ayuda dibujar con el mouse

Por favor, me pueden decir que estoy haciendo mal, por más que reviso no encuentro el error, se supone que tiene que salir el cuadro de colores en la parte superior de la paleta, pero no me sale, reviso y reviso con el codigo original y sigo los pasos pero no me sale. Auxilio, llevo más de dos horas buscando el error, no me sale error, pero tampoco me salen los cuadros. Gracias

No mentiras, ya di con el error, Gracias, me faltaba llamar la funcion paleta de colores, sabia que me faltaba algo, y casi me saco un ojo buscando el error. jajaj.

Lo siento soy super nueva en esto y a veces la lógica no me funciona.



<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 puedoDibujar = false;

    var xRojo = 0;
    var xAzul = 50;
    var xVerde = 100;
    var yCuadrados = 0;
    var tamanhoCuadrados = 50;



    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = "blue";
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

   function dibujarCuadrado(x, y, tamanho, color){

        pincel.fillStyle = color;
        pincel.fillRect (x, y, tamanho, tamanho);
        pincel.fill();

    }

    function dibujarPaletaColores(){
        dibujarCuadrado(xRojo, yCuadrados, tamanhoCuadrados, "red");
        dibujarCuadrado(xAzul, yCuadrados, tamanhoCuadrados, "blue");
        dibujarCuadrado(xVerde, yCuadrados, tamanhoCuadrados, "green");

    }





    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>
1 respuesta

Hola Catherine, espero que esté bien.

Que bueno que encontraste la solución a tu error!

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios