如何将事件侦听器添加到画布上绘制的矩形？

Question

我有一个画布元素，当页面加载时，图像和一些形状被绘制到画布上。单击图像时，我想触发一个功能。我首先尝试了这个。

const btn = ctx.drawImage(btnImg, 0, 0, 150, 100);

btn.onmousedown = function () {

  // do stuff

}

这没有用。我也没有在控制台中收到任何错误。然后我尝试使用该addEventListener功能。

const btn = ctx.drawImage(btnImg, 0, 0, 150, 100);

btn.addEventListener("click", function (event) {

  // do stuff

}, false);

再一次，这没有用。这是否可能无需使用 CSSz-index属性在画布上浮动按钮？

Answer 1

你想做的事是不可能的——至少不是这样。问题是画布实际上并不知道你画的东西的形状。它只知道单个像素颜色。但是，您可以做的是将按钮的边界框 - 屏幕位置和尺寸 - 保留为 Path2D 矩形，并使用该函数context.isPointInPath(path2d,x,y)检查是否有人在画布上按钮占据的区域内单击。这是一个示例（只需单击“运行代码片段”）：var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var image = new Image();var buttons = [];function draw(e) {&nbsp; let x, y, width, height, path;&nbsp; // first button&nbsp; x = 20;&nbsp; y = 20;&nbsp; width = 100;&nbsp; height = 20;&nbsp; context.drawImage(e.target, x, y, width, height);&nbsp; path = new Path2D();&nbsp; path.rect(x, y, width, height);&nbsp; buttons.push(path);&nbsp; // second button&nbsp; x = 150;&nbsp; y = 20;&nbsp; width = 100;&nbsp; height = 20;&nbsp; context.drawImage(e.target, x, y, width, height);&nbsp; path = new Path2D();&nbsp; path.rect(x, y, width, height);&nbsp; buttons.push(path);}function canvasClicked(e) {&nbsp; let button;&nbsp; for (var a = 0; a < buttons.length; a++) {&nbsp; &nbsp; button = buttons[a];&nbsp; &nbsp; if (context.isPointInPath(button, e.offsetX, e.offsetY)) {&nbsp; &nbsp; &nbsp; console.log("button " + (a + 1) + " clicked");&nbsp; &nbsp; }&nbsp; }}image.onload = draw;image.src = "https://picsum.photos/id/866/200/300";canvas.addEventListener("click", canvasClicked);<canvas id="canvas" style="background-color:grey;"></canvas>