如何查找单击了 Canvas 元素内的哪个对象名称/ID？答案

【问题标题】：How to find which Object name/id inside a Canvas Element is clicked?如何查找单击了 Canvas 元素内的哪个对象名称/ID？
【发布时间】：2012-02-11 01:55:17
【问题描述】：

我在 <canvas> 元素中有两张图片。

var ctx = document.getElementById('canvas').getContext('2d');

var img1 = new Image();
img1.src = 'cloud.jpg';
img1.name = "Image 1";
img1.onload = function() {
    ctx.drawImage(img1, 0, 0);
};

var img2 = new Image();
img2.src = 'eleph.png';
img2.name = "Image 2";
img2.onload = function() {
    ctx.drawImage(img2, 250, 250);
};

现在，当用户在画布内单击时，我想查找单击了哪个对象。例如，当用户单击画布内的相应图像时，提醒img1.name 或img2.name。

请提供一些指导如何做到这一点。谢谢！

【问题讨论】：

到目前为止您尝试过什么？ alert() 还是 console.log()？捕获点击事件？
通常您需要使用shadow canvas。
我已经尝试过 alert(e.target.name) 并将其返回给我画布对象。
如果你使用像 fabric.js 这样的画布库，这将是微不足道的。
感谢 minitech！它以某种方式解决了我的问题，但我认为如果我在画布内使用动画图像，这将是浏览器的内存负载。

标签： javascript html canvas

【解决方案1】：

首先，您必须在某个变量中存储每个图像的位置和大小。之后，在您的画布元素上添加一个 onclick 处理程序，该处理程序遍历图像位置集合，检查单击事件上哪个在鼠标下方。

【讨论】：

谢谢米哈斯！我使用的图像是透明的 PNG。根据我从您的回复中了解到的情况，我认为 onclick 将适用于图像的整个部分，而不是不透明的部分。如果我错了，请纠正我。
事实上，它适用于整个图像，包括透明区域
嗨@Mikhas，你的问题解决了吗？让我知道，因为我面临着类似的问题。
上述解决方案应该适合您。您需要添加一些额外的代码来保存图像的位置，而不是期望 DOM api 提供它。