Javascript 与画布中画布对象上的事件侦听器相关的问题&；附加问题

主要问题：

L本质上想用我的事件侦听器来解决这个问题，因为它与画布对象对齐，它是画布中间的图像，然而，它下面的Y区域仍然是可点击的，它右边的X区域仍然可点击。 我想消除这个问题，我认为这是由我的IF声明和DRAWIMAGE条件引起的，与我的画布有关。有一个可复制的演示，全屏/展开以查看

另一个问题：

另一件需要注意的事情是，当您调整浏览器窗口的大小时，画布对象并没有真正固定在画布上的某个位置，这一点非常值得赞赏。它只是移动到一个不同的方向，即使它应该卡在画布的一个区域中，而不管我的浏览器窗口大小如何——这意味着画布对象需要随着我的浏览器调整大小而动态调整大小+事件侦听器需要看到它再次感谢您，因为我很想了解我的逻辑错误，因为我可能使用了错误的坐标系，我真的不知道：//

var canvas=document.getElementById（“c”）；
var ctx=canvas.getContext（“2d”）；
var the_button=document.getElementById（“the_button”）；
var the_background=document.getElementById（“the_background”）；
var按钮_imageX=600；
var按钮_图像Y=390；
window.onload=函数（）{
ctx.drawImage（_背景，0，0，canvas.width，canvas.height）；
drawButton（）；
}
初始化（）；
函数初始化（）{
addEventListener（'resize'，resizeCanvas，false）；
调整画布的大小（）；
}
函数drawButton（）{
/*我相信这也是问题的部分原因*/
ctx.drawImage（按钮、按钮、图像x、canvas.height-按钮、图像y、170100）；
}
函数重画（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（_背景，0，0，canvas.width，canvas.height）；
drawButton（）；
}
函数resizeCanvas（）{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
重画（）；
}
_按钮_函数=（参数1）=>{
/*问题也存在于IF语句中，这是我的猜测*/
如果（（paramater1.x>（canvas.width-button_imageX））&&（paramater1.x（canvas.height-button_imageY））&&（paramater1.y按钮函数（e））
html，
身体{
宽度：100%；
身高：100%；
边际：0px；
边界：0；
溢出：隐藏；
显示：块；
}
要停止响应按钮右侧和下方的单击，请考虑按钮的宽度和高度

解决这个问题，并且知道之前在画布上绘制图像的位置，应该可以解决第二个问题。要调试此问题，下面的代码段将替换


button\u imageX
带有
button\u imageLeft
-从画布左侧绘制图像的像素数
button\u imageY
和
button\u imageBottom
-从画布底部到图像顶部的像素数。（这似乎是张贴的代码将按钮定位在y方向的方式。）

[
image\u bottonLeft
和
image\u buttonBottom
值已修改，以查看堆栈溢出的结果。]

介绍


按钮\u offsetX
-上次绘制按钮左侧的x位置
按钮_offset
-上次绘制按钮顶部的y位置
按钮图像宽度
和
按钮图像高度
按钮高度和宽度的值，替换硬编码值功能
绘图按钮


var canvas=document.getElementById（“c”）；
var ctx=canvas.getContext（“2d”）；
var the_button=document.getElementById（“the_button”）；
var the_background=document.getElementById（“the_background”）；
var按钮_imageLeft=100；
var按钮_imageBottom=150；
var按钮\u图像宽度=170；
var按钮_图像高度=100；
var按钮_offsetX，按钮_offsetY；
window.onload=函数（）{
ctx.drawImage（_背景，0，0，canvas.width，canvas.height）；
drawButton（）；
}
初始化（）；
函数初始化（）{
addEventListener（'resize'，resizeCanvas，false）；
调整画布的大小（）；
}
函数drawButton（）{
按钮\u偏移量x=按钮\u图像左侧；
button_offsetY=canvas.height-button_imageBottom；
ctx.drawImage（按钮、按钮偏移、按钮偏移、按钮图像宽度、按钮图像高度）；
}
函数重画（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（_背景，0，0，canvas.width，canvas.height）；
drawButton（）；
}
函数resizeCanvas（）{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
重画（）；
}
按钮功能=（事件）=>{
常数{x，y}=事件；
如果（（x>=按钮偏移x&&x<（按钮偏移x+按钮图像宽度））
&&（y>=按钮偏移（&y<（按钮偏移+按钮图像高度）））{
警报（“”）
}
}
addEventListener（'click'，（e）=>按钮函数（e））
html，
身体{
宽度：100%；
身高：100%；
边际：0px；
边界：0；
溢出：隐藏；
显示：块；
}
很抱歉回复太晚，但感谢您提供的答案。它解决了我的问题，我使用了给出的逻辑并修改了它，这样它就可以将图像锚定到窗口的任何一个角落。对于寻找此特性的任何人，这里是您需要修改代码的地方：
button\u offsetX=button\u imageLeft
&
button\u offsetY=canvas.height-button\u imageBottom