Передайте информацию в элемент холста, который будет возвращен при нажатии

Ответ 1

Я предлагаю вам взглянуть на Kinetic.js объектно-ориентированную библиотеку холста. Существуют и другие варианты, но из тех, которые я пробовал до сих пор, этот проект особенно легко интегрируется в проект HTML5/Canvas (IMO) и имеет отличную поддержку для событий (щелчок, mouseOver, mouseOut... и т.д.), а также для перетаскивания. Отлично подходит для пользовательских интерактивных холстов.

Надеюсь, это поможет вам.

Ответ 2

Я боюсь, что вы не можете выбрать элемент canvas так же, как выбрать элемент HTML DOM по id или классу. Но вы можете добавить прослушиватели событий мыши для обнаружения координат. И я все еще думаю, что использование тега HTML-тегов намного лучше.

Вот учебник об этом http://simonsarris.com/blog/140-canvas-moving-selectable-shapes.

Надеюсь, это поможет вам.

Ответ 3

Я предпочитаю использовать список из mousedown, а затем указать область кнопки, например, здесь кнопка будет от (30,30) до (60,60)

window.addEventListener("mousedown", doMouseDown, false);
function doMouseDown(event) {
  x = event.pageX - canvas.offsetLeft;
  y = event.pageY - canvas.offsetTop;
  if (x>=30 && x<=60 && y>=30 && y<=60) {
     alert("BUTTON PRESSED")
  }
}

Это, пожалуй, самый простой метод без импорта каких-либо библиотек

Ответ 4

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

function getPosition(event) {
    var x,
        y;
    if (event.x != undefined && event.y != undefined) {
        x = event.x;
        y = event.y;
    } else {
        x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= canvasElement.offsetLeft;
    y -= canvasElement.offsetTop;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    mouseX = x;
    mouseY = y;
}

getPosition следует использовать/вызывать с помощью холста следующим образом:

<canvas onclick='getPosition(event);'></canvas>

Он также работает для mouseover и mousemove.

Таким образом, используя mouseX и Y, вы можете проверить, находится ли мышь на кнопке. Кнопка должна быть прямоугольной.

if (mouseX > buttonX && 
    mouseX < buttonX + buttonWidth && 
    mouseY > buttonY && 
    mouseY < buttonY + buttonHeight) {
    //The mouse is on the button!  
}

buttonX и Y относятся к верхнему левому углу кнопки/области. Подобно ctx.fillRect()