(HTML5) Canvas 是否具有与图像地图等效的功能？
Canvas 元素是否具有相当于 img 的地图 的功能，以便您可以在画布元素？
页面中间简要提到了一张地图：http:// www.w3.org/TR/html5/the-canvas-element.html，但我找不到任何其他相关内容。
Does the Canvas element have the equivalent of img's map, so you can define clickable areas on the canvas element?
There is brief mention of a map halfway down the page here: http://www.w3.org/TR/html5/the-canvas-element.html, but I can't find anything else about it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
即使没有，位于画布上的透明图像上的图像映射难道不能满足您的需要吗？
Even if there isn't, wouldn't an image map on a transparent image positioned over a canvas get you what you need?
Canvas 上的地图目前是 HTML5 的一个未决问题。准确地说，是问题#105。请参阅http://www.w3.org/html/wg/tracker/issues/ 105
Maps on Canvas are currently an open issue with HTML5. Issue #105 to be precise. See http://www.w3.org/html/wg/tracker/issues/105
作为问题的解决方案：我将在画布上附加一个单击事件，在鼠标事件中我将检查鼠标坐标，然后是与多边形组合的简单区域列表，您可以对其进行某种碰撞测试。矩形将是一个开始，但如果您确实需要特殊区域，则必须进行更高级的碰撞测试。
我在 Flash 中用于像素精度地图的一个快速解决方案是制作第二个隐藏的覆盖位图，当有人单击可见图像时，您可以使用该位图进行查找。
与旧冒险游戏中使用的技术相同。每个“区域/对象/链接”都有自己的像素颜色。然后您只需保留具有匹配颜色的对象列表即可。
一旦你有了鼠标坐标下的像素颜色，那么你就可以在表中进行非常快速的查找......宾果游戏......
首先你用零（黑色）清除“点击图像”，这等于“无链接”，然后您用特殊颜色绘制每个区域并将该颜色存储在列表中。
询问您是否需要更多帮助。我希望这是一个有用的答案。
As a solution to your problem: I would attach a click event to the canvas and in the mouse-event I would examine the mouse-coords, then a simple list of areas combined with polygons you could do some sort of collision test on. Rectangles would be a start, but if you truely need special areas, a more advanced collision test would have to be made.
A quick solution I have used in Flash for pixel precision maps, is to make a second hidden overlay bitmap, that you use for lookup when someone click on the visible image.
Its same technic used in old adventure games. Each "area/object/link" has its own pixel color. And then you just keep the list of objects with the matching color.
Once you have the pixelcolor under the mousecoord, then you can do a very quick lookup in the table.. and bingo...
First you clear the "click image" with zero's (black) and thats equal to "no link", then you draw every area with a special color and store this color in the list.
Ask if you need more help. I hope this was a usefull answer.
您是否考虑过使用 svg 代替 canvas ？使用 svg，图形本身可以包含识别活动区域所需的所有信息，并且您可以附加事件处理程序，就像在 html 元素上一样。
有关如何检测 svg 形状几何形状的不同部分上的鼠标事件的一些示例：
http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-08-f.html
< a href="http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html" rel="nofollow noreferrer">http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html" w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html
Have you considered using svg instead of canvas? With svg the graphic itself can contain all the information you need for identifying active regions, and you can attach event handlers just like you would on html elements.
Some examples of how you can detect mouseevents on different parts of the geometry of svg shapes:
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
看看蛋糕。这是一个画布场景图插件。对于您正在寻找的内容来说可能有点太复杂，但是您可以将事件添加到 Cake 包装的画布对象中。
Take a look at Cake. It's a scene graph plug-in for canvas. Might be a little too complicated for what you're looking for, but you can add events to Cake wrapped canvas objects.