Html (HTML5) Canvas 是否相当于图像映射？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2932141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does (HTML5) Canvas have the equivalent of an image map?
提问by Mr. Flibble
Does the Canvas element have the equivalent of img's map, so you can define clickable areas on the canvas element?
Canvas 元素是否具有等效于img 的 map，因此您可以在 canvas 元素上定义可点击区域？
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.
此处在页面中间简要提到了一张地图：http: //www.w3.org/TR/html5/the-canvas-element.html，但我找不到关于它的任何其他内容。
采纳答案by Alohci
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
Canvas 上的地图目前是 HTML5 的一个未解决的问题。准确地说是问题 #105。见http://www.w3.org/html/wg/tracker/issues/105
回答by Weston C
Even if there isn't, wouldn't an image map on a transparent image positioned over a canvas get you what you need?
即使没有，位于画布上的透明图像上的图像映射不会满足您的需求吗？
回答by BerggreenDK
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.
我在 Flash 中用于像素精度地图的一个快速解决方案是制作第二个隐藏的叠加位图，当有人点击可见图像时，您可以使用它进行查找。
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.
询问您是否需要更多帮助。我希望这是一个有用的答案。
回答by JoshNaro
回答by Erik Dahlstr?m
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.
您是否考虑过使用 svg 而不是画布？使用 svg，图形本身可以包含识别活动区域所需的所有信息，并且您可以像在 html 元素上一样附加事件处理程序。
Some examples of how you can detect mouseevents on different parts of the geometry of svg shapes:
关于如何在 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-08-f.html
http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html
http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html
