Question

我目前有一张包含许多图片的画布。我需要知道是否点击了图像以及它是什么图像。我可以像下面那样得到鼠标位置

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

由于您已经在画布中具有鼠标的本地位置，因此将图像位置和大小存储在数组中就足够了，按外观排序。根据你的情况，你最终得到一个阵列：

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

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

1 个答案: