Question

有没有办法将一些id或信息传递给canvas元素，这样当你点击它时你可以将它找回来？

Answer 1

我建议你看看Kinetic.js一个面向对象的画布库。还有其他选择，但是从我尝试过的那个到现在这个选项特别容易集成到HTML5 / Canvas项目（IMO）中并且对事件有很大的支持（click，mouseOver，mouseOut ......等）还有Drag＆amp;下降。非常适合在面向用户交互的画布中使用。

希望它对你有所帮助。

Answer 2

我担心您不能选择canvas元素，就像按ID或类选择HTML DOM元素一样。但您仍然可以添加鼠标事件侦听器来检测坐标。我仍然认为使用HTML按钮标签要好得多。

这是一个关于它的教程http://simonsarris.com/blog/140-canvas-moving-selectable-shapes。

希望它可以给你帮助。

Answer 3

我更喜欢使用mousedown listner，然后指定按钮的区域，例如按钮将从（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")
  }
}

这可能是最简单的方法，无需导入任何库

Answer 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>

它也适用于鼠标悬停和鼠标移动。

因此，通过使用mouseX和Y，您可以检查鼠标是否在按钮上。按钮必须是矩形。

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

buttonX和Y指的是按钮/区域的左上角。与ctx.fillRect（）

类似

将信息传递给单击时将返回的canvas元素

4 个答案: