Javascript 如何在单击画布中的某个区域时运行某个函数

当我的鼠标点击画布的某个区域时，我希望能够运行某个功能，但我不知道如何去做。（我是编程新手）例如，如果我想在画布右上角的矩形区域内单击，如坐标“172,58269166”

帆布{
页边顶部：自动；
左边距：自动；
右边距：自动；
页边距底部：自动；
/*显示：块*/
}
函数loadImages（源、回调）{
var图像={}；
var loadedImages=0；
var numImages=0；
//获取源的数量
用于（源中的var src）{
numImages++；
}
用于（源中的var src）{
图像[src]=新图像（）；
图像[src].onload=function（）{
如果（++LoadeImage>=numImages）{
回调（图像）；
}
};
图像[src].src=源[src]；
}
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
//标识每个图片的内容
风险值来源={
背景：“MANCALA-game_bg_combined3.png”，
pit1marble1:“MANCALA-game_marble.png”，
pit1marble2:“MANCALA-game_marble.png”，
pit1marble3:“MANCALA-game_marble.png”，
pit1marble4:“MANCALA-game_marble.png”，
pit1marble5:“MANCALA-game_marble.png”，
pit1marble6:“MANCALA-game_marble.png”，
};
//在画布上加载图像
加载图像（源、函数（图像）{
context.drawImage（images.background，0,0,1141479）；
上下文.drawImage（images.pit1marble1200,70,50,50）；
上下文。drawImage（images.pit1marble2、160、85、50、50）；
上下文。drawImage（images.pit1marble3、175、75、50、50）；
上下文.drawImage（images.pit1marble4、190、80、50、50）；
上下文.drawImage（images.pit1marble5200100,50,50）；
上下文.drawImage（images.pit1marble6、160、100、50、50）；
//鼠标定位
document.getElementById（“myCanvas”）.onclick=function（）{pasDiKlik（）}；
函数pasDiKlik（）{
context.beginPath（）；
arc（event.clientX-10，event.clientY-10,10,0,2*Math.PI，false）；

您可以将eventlistener添加到画布，获取鼠标在画布上的位置，并基于此执行操作。例如：

var canvas = document.getElementById("MyCanvas")
var canvasLeft = canvas.offsetLeft,
var canvasTop = canvas.offsetTop
canvas.addEventListener("click", function(event){
var x = event.pageX - canvasLeft
var y = event.pageY - canvasTop;
};

变量x和y现在是画布上的像素位置

例如，检查第一个框（左上：200px，70px，右下：250px，120px）

如果（x>=200&&x=70&&y
var canvas = document.getElementById("MyCanvas")
var canvasLeft = canvas.offsetLeft,
var canvasTop = canvas.offsetTop
canvas.addEventListener("click", function(event){
var x = event.pageX - canvasLeft
var y = event.pageY - canvasTop;
};

if (x >= 200 && x <= 250 && y >= 70 && y <= 120) {
  //perform action here
};