如何查找Canvas元素中的哪个Object name / id？

Question

我在<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。

请说明如何执行此操作。谢谢！

Answer 1

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