Как мне определить местоположение щелчка мыши в canvas, находясь в таблице?

#javascript #canvas

#javascript #canvas

Вопрос:

Я создал элемент управления для выбора цветов с помощью цветового круга с независимыми ползунками для определения насыщенности оттенка и яркости. Я хочу использовать два из них рядом, форматирование приводит к тому, что я хочу поместить эти объекты canvas в таблицу. Теперь, когда я локализую щелчки, значения смещения холста ( canvas.offsetLeft и canvas.offsetTop не равны 0, поэтому щелчки расположены далеко справа и снизу от того места, где они находятся). Кто-нибудь выяснил, как локализовать щелчок мыши на холсте, находясь в ТАБЛИЦЕ. В остальном все работает нормально.

Извините, что беспокою вас, я нашел ответ, передав смещения из объектов таблицы объекту, обрабатывающему события мыши.

Ответ №1:

Получите ссылку на нужный элемент canvas:

 var canvas=document.getElementById("myCanvas");
  

А затем используйте getBoundingClientRect , чтобы указать вам координаты слева и сверху холста

 var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;