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

Posted 2023-05-08

【中文标题】(HTML5) Canvas 是不是具有图像映射的等价物？

【英文标题】：Does (HTML5) Canvas have the equivalent of an image map?(HTML5) Canvas 是否具有图像映射的等价物？

【发布时间】：2011-02-25 07:18:47

【问题描述】：

Canvas 元素是否具有 img's map 的等价物，因此您可以在 canvas 元素上定义可点击区域？

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

【参考方案1】：

即使没有，位于画布上的透明图像上的图像映射难道不能满足您的需要吗？

【参考方案2】：

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

【讨论】：

更新：问题已在this working group decision关闭。

【参考方案3】：

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

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

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

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

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

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

【参考方案4】：

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

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

http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-08-f.html

http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html

【参考方案5】：

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