確實（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畫布對象。