画布元素作为链接

Question

我的画布上有一张交互式国家地图。用户可以移动和缩放它。 这张地图由该国家的不同地区组成。

我想做的下一件事是当用户在地图上悬停国家的特定区域时（每个区域由函数组成：beginPath、moveTo、lineTo、closePath、fill、stroke），该区域被突出显示，然后当用户单击时在该区域，会出现一些弹出窗口。

实现这个的方法是什么？

Answer 1

感谢GameAlchemist 和markE cmets（也感谢markE 链接http://dougx.net/map/usmap.html）

我找到了解决方案：每次触发 mousemove 事件时，我都会绘制每个区域。但我既不描边也不填充它。因此，在每个 closePath 方法之后，我使用 IsPointInPath() 方法来检查鼠标是否悬停在该区域上，然后我可以突出显示它或做任何我需要的事情。

那里的关键点（感谢https://shifteleven.com/demo/canvas-hit-detection/）我不填充和描边区域 - 占用计算机资源的东西。我只是绘制隐藏路径并检查鼠标是否悬停在此路径 - 区域。按照上面的链接，它提供了在画布上绘制的多达 100000 个行星的示例。您可能会注意到绘制这些行星需要一些时间以及它确定点击哪个行星的速度。