获取画布上的图像是否已单击Javascript

我现在有一张画布，里面有很多图片。我需要知道一个图像是否被点击，它是什么图像。我可以得到如下所示的鼠标位置

function getPosition(event)
{
  var mousex = event.x;
  var mousey = event.y;



  mousex -= canvas.offsetLeft;
  mousey -= canvas.offsetTop;

  //alert("x:" + mousex + " y:" + mousey);

}

我的图片如下所示

g.drawImage(img1, 100, 50, 300,300);
   g.drawImage(img2, 300, 50, 300,300); 
   g.drawImage(img3, 10, 20, 300,300); 

---

由于您已经在画布中拥有鼠标的本地位置，因此只需将图像位置和大小按外观顺序存储在一个数组中即可。根据您的情况，您将得到一个数组：

[[img3, 10, 20, 300, 300], [img2, 300, 50, 300, 300], [img1, 100, 50, 300, 300]]

然后，每次处理鼠标单击时，迭代上述数组，并通过以下代码检查图像中是否包含鼠标位置：

(mousex >= img.x) && (mousex < img.x + img.width) && (mousey >= img.y) && (mousey < img.y + img.height)

（mousex>=img.x）和&（mousex=img.y）和&（mousey

一旦发现鼠标包含在图像中，请返回该图像并停止迭代。 如果迭代结束时未命中图像，则可能返回

null

或

false