1
respuesta

Asociando eventos con funciones

<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 mostrarMensaje(evento){
        var x = evento.pageX - pantalla.offsetLeft; //pos x
        var y = evento.pageY - pantalla.offsetTop; //pos y
        var d = new Date(); //crea una variable de tipo date
        var hora = checkTime(d.getHours()) + ":" + checkTime(d.getMinutes()) + ":" + checkTime(d.getSeconds());
        //Verifica si el número de las horas, minutos o segundos, tiene un solo dígito, 
        console.log(evento);
        //caso positivo le adiciona el cero en la frente para obtener el formato deseado 00:00:00
        function checkTime(i){
            if (i<10){
                i="0" + i;
            }
            return i;
        }

        alert("La hora es: " + hora + " y las coordenadas son: x=" + x + ", y=" + y);
    }

    // Aquí viene la llamada a la función con el evento onclick
    pantalla.onclick = mostrarMensaje;  
</script> 
1 respuesta

¡Hola Irvin!

En el código que compartiste, se muestra un ejemplo de cómo asociar un evento con una función en JavaScript. En este caso, se utiliza el evento "onclick" del elemento "canvas" para llamar a la función "mostrarMensaje" cada vez que se hace clic en el canvas.

Dentro de la función "mostrarMensaje", se obtienen las coordenadas del clic y la hora actual del sistema. Luego, se muestra un mensaje de alerta con esta información.

Es importante mencionar que la función "checkTime" se utiliza para agregar un cero al frente de los números de una sola cifra en la hora actual, con el fin de mostrarla en un formato de dos cifras.

Espero que esta información te sea útil. ¡Buenos estudios!

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