html - (HTML5) Canvas 是否具有图像映射的等价物？

Question

Canvas 元素是否有相当于img 的 map 的功能，所以可以在 canvas 元素上定义可点击区域？

在这里页面中间有一张地图的简短提及：http: //www.w3.org/TR/html5/the-canvas-element.html，但我找不到任何关于它的信息。

score 16 · Accepted Answer

即使没有，放置在画布上的透明图像上的图像映射不会为您提供所需的东西吗？

score 15 · Accepted Answer

Canvas 上的地图目前是 HTML5 的一个未解决问题。确切地说，问题＃105。见http://www.w3.org/html/wg/tracker/issues/105

score 5 · Accepted Answer

作为您的问题的解决方案：我将在画布上附加一个单击事件，并在鼠标事件中检查鼠标坐标，然后是一个简单的区域列表与多边形相结合，您可以对其进行某种碰撞测试。矩形将是一个开始，但如果您真的需要特殊区域，则必须进行更高级的碰撞测试。

我在 Flash 中用于像素精度贴图的快速解决方案是制作第二个隐藏的叠加位图，当有人单击可见图像时，您可以使用该位图进行查找。

它与旧冒险游戏中使用的技术相同。每个“区域/对象/链接”都有自己的像素颜色。然后您只需保留具有匹配颜色的对象列表。

一旦你在鼠标坐标下有了像素颜色，你就可以在表格中进行非常快速的查找......然后宾果游戏......

首先用零（黑色）清除“单击图像”，这等于“无链接”，然后用特殊颜色绘制每个区域并将该颜色存储在列表中。

询问您是否需要更多帮助。我希望这是一个有用的答案。

score 2 · Accepted Answer

您是否考虑过使用 svg 代替画布？使用 svg 图形本身可以包含识别活动区域所需的所有信息，并且您可以像在 html 元素上一样附加事件处理程序。

一些关于如何在 svg 形状的几何形状的不同部分检测鼠标事件的示例：

score 2 · Accepted Answer

看看蛋糕。这是一个画布的场景图插件。对于您要查找的内容可能有点过于复杂，但您可以将事件添加到 Cake 包装的画布对象。

5 回答 5