在图像上标记位置和路线

Question

我正在开发一款新的寻路软件。我想让用户选择一个背景图像，一个游乐园，办公设施等的概述。然后让用户在图像上选择一些重要的点。例如，“您在这里”点上，包含路标地图的“监视器”(这将最终发生变化，并变得更加动态)。

所以协议是：

1:需要基于web的2:让管理员在图像3上选择一个点:让管理员在图像4上绘制一系列目的地(点)：布局/绘制源点和端点之间的线。

如何选择/单击HTML5中的图像上的一个点，并得到该点的坐标(x，y)？(我想我可以用同样的技术来绘制/绘制图像上的路线。

感谢所有的投入，

/Brian

Answer 1

您正在寻找<canvas style="background-image:url(map.jpg)" id="map">标签。然后可以使用context = document.getElementById('map').getContext("2d");创建一个context，context具有绘图功能。

您可以通过onlick、onmousedown和onmouseup事件获得x，y坐标。