Как получить координаты щелчка мышью на элементе холста?

Иногда нам может потребоваться получить координаты мыши на элементе холста HTML.

В этой статье мы рассмотрим, как получить координаты щелчка мыши по элементу холста.

Добавить обработчик событий mousedown

Мы можем получить координаты щелчка мыши из объекта события, который мы получаем из обработчика события mousedown.

Например, мы можем написать следующий HTML:

<canvas style="width: 200px; height: 100px">
</canvas>

Затем мы можем написать следующий код JavaScript:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
const getCursorPosition = (canvas, event) => {
  const rect = canvas.getBoundingClientRect()
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top
  console.log(x, y)
}
canvas.addEventListener('mousedown', (e) => {
  getCursorPosition(canvas, e)
})

Мы добавляем элемент холста шириной 200 пикселей и высотой 100 пикселей.

Затем мы получаем элемент холста с помощью метода document.querySelector.

Затем мы получаем контекст холста с помощью метода getContext.

Затем мы вызываем moveTo, чтобы переместить курсор в заданные координаты x, y.

И мы вызываем lineTo, чтобы нарисовать линию с заданными координатами x, y.

Затем мы вызываем stroke, чтобы провести линию.

Затем мы создаем функцию getCursorPosition для получения параметров холста и события.

Мы вызываем canvas.getBoundingClientRect, чтобы получить объект rect, который имеет свойства left и top, чтобы получить координаты x и y левого верхнего угла.

Затем мы вычитаем это из свойств event.clientX и event.clientY, которые имеют координаты мыши экрана, на котором мы щелкнули.

Следовательно, x и y имеют координаты мыши, по которым мы щелкнули на холсте.

Наконец, мы вызываем canvas.addEventListener, чтобы добавить прослушиватель событий mousedown.

В нем мы вызываем getCursorPosition, чтобы получить координаты мыши, по которым мы щелкнули на холсте, и зарегистрировать их.

x и y в пикселях.

Кроме того, мы можем получить свойства offsetX и offsetY из объекта event, чтобы получить координаты холста, на котором мы щелкнули.

Например, мы можем написать:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
const getCursorPosition = (canvas, event) => {
  const x = event.offsetX
  const y = event.offsetY
  console.log(x, y)
}
canvas.addEventListener('mousedown', (e) => {
  getCursorPosition(canvas, e)
})

чтобы получить координаты мыши без выполнения вычислений.

Заключение

Мы можем получить координаты мыши места, по которому мы щелкнули на холсте, с помощью нескольких свойств из объекта события mousedown.