javascript - 获取 Canvas 上的图像是否被单击 Javascript

Question

我目前有一个包含很多图片的 Canvas 。我需要知道是否单击了图像以及它是什么图像。我可以得到如下鼠标位置

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); 

Answer 1

由于您已经知道鼠标在 Canvas 中的本地位置，因此只需将图像位置和大小存储在数组中(按外观排序)即可。根据您的情况，您最终会得到一个数组:

[[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)

一旦发现鼠标包含在图像中，就返回该图像并停止迭代。如果迭代结束时没有图像命中，您可能会返回 null 或 false