Las coordenadas del mouse cada vez que se realiza un clic se pueden encontrar detectando el evento de clic con un detector de eventos y encontrando la posición x e y del evento.
Se crea una función que toma el elemento canvas y el evento como parámetros. La dimensión del lienzo se encuentra usando la función getBoundingClientRect() . Este método devuelve el tamaño de un elemento y su posición relativa a la ventana gráfica.
La posición de la coordenada x del clic del mouse se encuentra restando la posición x del evento con la posición x del rectángulo delimitador. La posición x del evento se encuentra usando la propiedad ‘clientX’. La posición x del elemento del lienzo, es decir, el lado izquierdo del rectángulo se puede encontrar usando la propiedad ‘izquierda’.
De manera similar, la posición de la coordenada y del clic se encuentra restando la posición y del evento con la posición y del rectángulo delimitador. La posición y del evento se encuentra usando la propiedad ‘clientY’. La posición y del elemento del lienzo, es decir, el lado superior del rectángulo se puede encontrar utilizando la propiedad ‘superior’.
Esta resta compensará la ubicación del lienzo en la página, ya que la posición xey del evento sería relativa a la página y no al lienzo.
Para detectar el clic, primero se selecciona el elemento del lienzo mediante el método querySelector(). El método addEventListener() se usa en este elemento para escuchar el evento ‘mousedown’. Este evento se activa cada vez que se presiona un botón del mouse. La devolución de llamada de esta función se usa para llamar a la función creada anteriormente para detectar la posición del clic.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to get the coordinates of a mouse
click on a canvas element?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How do I get the coordinates of a
mouse click on a canvas element?
</b>
<p>
Click anywhere on the canvas element
to get the mouse pointer location.
</p>
<p>
The size of the canvas
is a square of 200px.
</p>
<p>Check the console for the output.</p>
<canvas width="200" height="200"
style="background-color: green">
</canvas>
<script type="text/javascript">
function getMousePosition(canvas, event) {
let rect = canvas.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
console.log("Coordinate x: " + x,
"Coordinate y: " + y);
}
let canvasElem = document.querySelector("canvas");
canvasElem.addEventListener("mousedown", function(e)
{
getMousePosition(canvasElem, e);
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en cualquier lugar del lienzo:
- Después de hacer clic en el lienzo:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA