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

Necesito ayuda, diseñando con mouse

estoy confundido con los onmousedown y onmouseup, no sé como hacer para que funcionen correctamente

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

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

        function crearFondo(){
        pincel.fillStyle="white";
        pincel.fillRect(0,0,600,400);
        }
        function crearPaleta(x,color){
            pincel.fillStyle=color;
            pincel.beginPath();
            pincel.fillRect(x,0,50,50);
        }
        function dibujarCirculo(parametros){
            var mouseX=parametros.pageX-pantalla.offsetLeft;
            var mouseY=parametros.pageY-pantalla.offsetTop;
            if( (mouseX<160) && (mouseY<60)){
                deshabilitarDibujo();
            }else{
                habilitarDibujo();
            }
            if(dibujar){
                pincel.fillStyle=color;
                pincel.beginPath();
                pincel.arc(mouseX,mouseY,10,0,2*Math.PI)
                pincel.fill();
            }
        }
        function deshabilitarDibujo(){
            dibujar=false;
        }
        function habilitarDibujo(){
            dibujar=true;
        }
        function comprobarColor(parametros){
            var mouseX=parametros.pageX-pantalla.offsetLeft;
            var mouseY=parametros.pageY-pantalla.offsetTop;
            if((mouseX<50)&&(mouseY<50)){
                color="red";
            }
            if((mouseX>50)&&(mouseX<100)&&(mouseY<50)){
                color="green";
            }
            if((mouseX>100)&&(mouseX<150)&&(mouseY<50)){
                color="blue";
            }
        }
        crearFondo();
        crearPaleta(0,"red");
        crearPaleta(50,"green");
        crearPaleta(100,"blue");
        var dibujar=true;
        var color="blue";
        pantalla.onclick=comprobarColor;
        pantalla.onmousemove=dibujarCirculo;
        pantalla.onmousedown=habilitarDibujo;
        pantalla.onmouseup=deshabilitarDibujo;
1 respuesta

Hola Nicolas, espero que estés muy bien.

El evento onmouseup ocurre cuando un usuario suelta un botón del mouse sobre un elemento.

https://www.w3schools.com/JSREF/event_onmouseup.asp

El evento onmousedown ocurre cuando un usuario presiona un botón del mouse sobre un elemento.

https://www.w3schools.com/jsref/event_onmousedown.asp

Te dejo la documentación como material complementário. Espero haberte ayudado, un saludo!

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