代码之家 › 专栏 › 技术社区 › Mr. Flibble

(HTML5)Canvas是否具有与图像地图相同的功能?

imagemap canvas html5

13

Mr. Flibble · 技术社区 · 14 年前

canvas元素是否与 img's map ,以便您可以在canvas元素上定义可单击区域?

在这一页的中间有一张地图: http://www.w3.org/TR/html5/the-canvas-element.html 但是我找不到其他的东西。

5 回复 | 直到 10 年前

1

13

Alohci 14 年前

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

2

14

Weston C 14 年前

即使没有,放置在画布上的透明图像上的图像映射是否能满足您的需求?

3

4

BerggreenDK 14 年前

作为您问题的解决方案:我将在画布上附加一个单击事件,在鼠标事件中,我将检查鼠标坐标,然后检查与多边形组合的区域的简单列表,您可以对其进行某种碰撞测试。矩形将是一个开始,但如果你真的需要特殊的区域,一个更先进的碰撞测试将不得不作出。

我在Flash中使用的一个快速解决方案是制作第二个隐藏的覆盖位图,当有人单击可见图像时,可以使用该位图进行查找。

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

一旦您在mousecord下使用了pixelcolor,那么您就可以在表中快速查找。宾果…

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

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

4

2

Erik Dahlström 14 年前

你考虑过用SVG代替画布吗?使用SVG,图形本身可以包含识别活动区域所需的所有信息,并且可以像在HTML元素上那样附加事件处理程序。

关于如何在SVG形状的几何图形的不同部分上检测鼠标事件的一些示例:

5

2

geedubb 10 年前

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