javascript跟踪并将多个图像放置在图像顶部

我在这里搜索了一下，找不到任何适合这个问题的答案

我正在写一个曲棍球得分机会跟踪器，基本上我想显示一个曲棍球冰的图像，每次你点击图像时，它会记住你点击的位置，在你点击的位置放一个红色的小圆圈，上面有一个数字。该数字将是一个自动递增的数字。最终，我希望跟踪所有鼠标单击的位置，以便将其存储到数据库中

图像的侧面将是一个表单，每次单击鼠标时，它都会向表中添加一个新行。这部分不太难，我可以用jquery轻松地完成

我遇到的问题是，试图找到一种快速简便的方法，将同一个图像多次放置在用户单击的另一个图像上。为了做到这一点，我一直在研究HTML5/Canvas，以及纯javascript/jquery

我在这里征求关于简单方法的建议

---

谢谢

这里有一个超级简单的jsfiddle，介绍了我如何开始做这件事-如果您有任何问题/顾虑/需要进一步改进的帮助，请告诉我，我很乐意更新

---

（只需防止我的div是图像，侧边栏是真实的形式…

以下是我的做法-简单、简短，我不知道您希望如何扩展它：

我将创建一个数组，并将事件侦听器绑定到希望用户单击的div

每次用户单击此图像时，都会传递一个事件对象，您可以根据布局读取鼠标的X和Y坐标-.position（）或.offset（）。 创建一个JSON对象，该对象存储以下值：

var hit = {
    id: 1,
    x: 250,
    y: 365,
    //add more attributes if you like/need
    //for this particular 'hit'
}

您可以将此对象（-notation）存储在数组中：

hitz.push(hit);

现在，您应该基于此数组“更新”UI。 只需使用for…in循环进行循环，然后创建图像：

var hockeyIceClone= $("div.hockey-ice").clone(true);

for (var i in hitz) {
    var hit = hitz[i];
    hockeyIceClone.append(
        //assuming that your .hockey-ice div has position:relative at least
        var image = $(new Image('image/path.png'));
        //add more stuff for image if you like
        $(image).css({
            position: absolute,
            left: hit.x,
            top: hit.y
        })
    );
}

$("div.hockey-ice").replaceWith(hockeyIceClone);

克隆的原因是，当您在数组中循环并将元素附加到放置在UI上并在UI上可见的“容器”中时，它可能会在呈现时闪烁。因此，您最好先“收集”它，然后将它们一起放到UI中。

---

此外，您还可以使用克隆以外的其他方法，这只是一种选择。

您个人对画布或DOM操作有偏好吗？这两种方法都应该很容易做到，这是你的选择。选择一个，我很乐意提供一些示例代码…没有使用canvas的经验，通过jquery的DOM是我有经验的地方。克隆图像元素并将其附加到DOM不起作用吗？然后，您只需获取鼠标坐标，并设置克隆节点的位置。您在克隆或定位方面遇到了什么问题？而且，作为记录，Canvas在内存使用率/性能方面可能会稍微好一点，但这可能不是什么大问题，所以我会坚持使用您知道的内容（除非您对Canvas感兴趣-这可能非常有趣！）尝试获取鼠标单击的位置，最好是相对于背景图像，因为我希望它能在所有浏览器和浏览器大小下工作。不，这很有帮助，我认为这有助于我走上正轨。