确实（HTML5）Canvas具有相同的图像映射吗？

Question

画布元素是否具有相当于img's map，因此您可以在画布元素上定义可点击区域？

下面简要介绍一下地图中的一张地图：http://www.w3.org/TR/html5/the-canvas-element.html，但我找不到其他任何东西。

Answer 1

画布上的地图目前是HTML5的一个未解决的问题。问题＃105准确。请参阅http://www.w3.org/html/wg/tracker/issues/105

Answer 2

即使没有，位于画布上的透明图像上的图像映射是否会得到您所需的图像？

Answer 3

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

，你如何可以检测对SVG图形的几何形状的不同部分mouseevents一些例子：

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

Answer 4

作为解决你的问题：我将点击事件附加到画布和鼠标事件中，我将检查鼠标坐标，然后列出一些与多边形相结合的区域列表，您可以进行某种碰撞测试。矩形将是一个开始，但如果您确实需要特殊区域，则必须进行更先进的碰撞测试。

我在Flash中用于像素精度映射的快速解决方案是制作第二个隐藏的叠加位图，当用户单击可见图像时用于查找。

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

一旦有mousecoord下pixelcolor，那么你可以做的表..和宾果非常快速查找...

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

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

Answer 5

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