Javascript 使用addEventListener通过单击画布中的特定区域使图像显示

我一直在用Canvas和Javascript构建时间线。我非常缺乏经验，一直在努力让addEventListener对画布中的某些坐标做出反应。 这就是我正在做的：

我想做的是，当你点击其中一个年度圆圈时，会弹出3个PNG。我已经设法让它们在单击画布上的任何位置时出现，但我不知道如何告诉addEventListener，只有当用户单击某些坐标（例如：圆圈）时，才让PNG出现。问题的另一部分是，如果用户单击另一个圆圈，我希望前一个圆圈的PNG消失，而新单击的圆圈的PNG出现

现在的addEventListener：

ctx.canvas.addEventListener('mousedown', function(event) { 
        //below are the images I've loaded and want to use
        var photo = new Image();
        photo.src = "photo.png";
        var papers = new Image();
        papers.src = "papers.png";
        var collab = new Image();
        collab.src = "collab.png";
        ctx.drawImage(photo, 390, 230, 80, 80);
        ctx.drawImage(papers, 530, 230, 80, 80);    
        ctx.drawImage(collab, 530, 280, 80, 80);
    });

我的想法是，如果我将这些co-ords加载到一个数组中，然后通过事件处理程序使用For循环或条件语句（或两者都使用？）循环通过以找到匹配的co-ords。如果匹配，将显示PNG。如果他们不这样做，什么也不会发生。简言之：

var mouseCo = [{x1,y1,x2,y2,x3,y3,x4,y4}, <------circle1 
               {x1,y1,x2,y2,x3,y3,x4,y4}, <------circle2 
               {x1,y1,x2,y2,x3,y3,x4,y4}]; <------circle3

你觉得怎么样？如果有更好/更快的方法，我洗耳恭听——我想可能有一种更简单、更轻松的方法，但我是个傻瓜。

---

谢谢大家：）

您必须从事件处理程序获取

事件.offsetX

和

事件.offsetY

。这些偏移量从元素左上角的

0,0

开始，然后随着鼠标距离的增加（以像素为单位）。然后你就知道鼠标被点击的位置了。几何图形将帮助您了解是否在边界内。对于圆，您只需要原点和半径。正如您所说的，您使用圆圈在数组中循环并签入每个圆圈，您可能不会停止，因为您的鼠标可能位于2个或更多边界中

ctx.canvas.addEventListener('mousedown', function(event) { 
//put here either a for loop or conditional statment (maybe both?) to run thru the array, check if
//co-ords click match the ones in the array and if so, show pngs, if not, do nothing.
});