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

我有一个canvas元素，当页面加载时，一个图像和一些形状被绘制到画布上。单击图像时，我想触发一个函数。我第一次试过这个

const btn=ctx.drawImage（btnImg，0,0,150,100）；
btn.onmousedown=函数（）{
//做事
}

这不管用。我也没有在控制台中得到任何错误。然后我尝试使用

addEventListener

函数

const btn=ctx.drawImage（btnImg，0,0,150,100）；
btn.addEventListener（“单击”），函数（事件）{
//做事
}，假）；

---

再一次，这不起作用。不必使用CSS

z-index

属性在画布上浮动按钮，这是否可行？

您想做的事情是不可能的，至少不可能以这种方式。 问题是画布实际上并不知道事物的形状 你画上了。它只知道单个像素的颜色

但是，您可以做的是保持边界框-屏幕位置和尺寸- 将按钮的路径设置为Path2D矩形，并使用

context.isPointInPath（Path2D，x，y）

函数进行检查 如果有人在画布上被按钮占据的区域内单击

下面是一个示例（只需单击“运行代码片段”）：

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
var image=新图像（）；
var按钮=[]；
功能图（e）{
设x，y，宽度，高度，路径；
//第一个按钮
x=20；
y=20；
宽度=100；
高度=20；
背景。绘图图像（如目标、x、y、宽度、高度）；
路径=新路径2D（）；
path.rect（x，y，宽度，高度）；
按钮。按（路径）；
//第二个按钮
x=150；
y=20；
宽度=100；
高度=20；
背景。绘图图像（如目标、x、y、宽度、高度）；
路径=新路径2D（）；
path.rect（x，y，宽度，高度）；
按钮。按（路径）；
}
功能画布（e）{
让按钮；
对于（var a=0；a