Как определить событие onclick по элементу в canvas?

Question

Есть рабочий код:

cvs.onmousemove = function() {
  mouseX = event.offsetX;
  mouseY = event.offsetY;
  if (mouseX >= centerPosX(cvs) - centerPosX(restart) && mouseX <= (centerPosX(cvs) - centerPosX(restart)) + restart.width && mouseY >= centerPosY(cvs) && mouseY <= centerPosY(cvs) + restart.height) {

    console.log(mouseX); //Координаты мыши Х
  }
}

В данном коде вначале отслеживаются координаты мыши и записываются в переменную. Далее условие - если мышь находится в пределах нужных мне координат, то выводим в консоль координаты мыши X

ВОПРОС: Нужно добавить в условие код, который будет отслеживать клик по этим координатам. Типа в конце условия должно быть что то типа && restart.onclick (restart - это кнопка(спрайт) по которой надо жать и именно её координаты указаны в условии)

Всё что я пробовал - не работает и гугл не помогает.

Answer 1

РЕШЕНИЕ

cvs.onmousemove = function() {
  mouseX = event.offsetX;
  mouseY = event.offsetY;
  if (mouseX >= centerPosX(cvs) - centerPosX(restart) && mouseX <= (centerPosX(cvs) - centerPosX(restart)) + restart.width && mouseY >= centerPosY(cvs) && mouseY <= centerPosY(cvs) + restart.height) {
    cvs.onclick = function() {
      console.log(`Ура! Работает!`);
    }
  } else {
    cvs.onclick = null;
  }
}

В тело функции if я добавил:

cvs.onclick = function() {
  console.log(`Ура! Работает!`);
}

И добавил к if логический оператор else, который будет убирать отслеживание клика, если курсор не в заданной области.

БЛОГ НА HUSL

Как определить событие onclick по элементу в canvas?

Ответы (1 шт):