HTML5畫布問題

Question

我正在編寫一個腳本來完成幾件事情。簡而言之，這就是它需要做的事情：

1. 閱讀頁面的座標，並能夠在特定區域內彈出一個框。
2. 彈出框需要能夠跟隨鼠標左右。
3. 我需要能夠修改框但看起來，但我想（我想一個div容器設置爲顯示：隱藏，然後JS設置顯示屏，當鼠標指定的區域時，屏蔽） 。
4. 我需要能夠很容易地修改它（又名，加減對象和座標集）

我原本是使用HTML圖（），而偉大的工作，直到我調整我的瀏覽器，並我跟隨鼠標的div不再正確排列。有些偏移量無法正常工作，並且無法正常工作，因此我切換到HTML畫布。 現在我已經在畫布上獲得了正確的座標，當鼠標位於特定部分的內部時，我無法弄清楚如何讓某些東西彈出來。這裏是我當前的代碼：

function drawLines(numbers, color){ 
//poly [x,y, x,y, x,y.....]; 
var poly=numbers; 
context.fillStyle = color; 
context.beginPath(); 
context.moveTo(poly[0], poly[1]); 
for(item=2 ; item < poly.length-1 ; item+=2) 
    {context.lineTo(poly[item] , poly[item+1])}; 
context.closePath(); 
context.fill(); 

}

我有一個數組，然後我通過一個傳遞給函數的一個內部的每個區域。顏色是一個測試，我可以很容易地讓每個區域顯示爲指定的顏色，但這並不能解決我的問題。有任何想法嗎？謝謝！

Answer 1

似乎很奇怪在風格問題跳轉到畫布上，而忽略了......

你可以綁定canvas元素上鼠標移動事件，然後辦砸在你的區域測試，看看鼠標裏面的地區。

根據您測試的區域數量進行有效的測試可能會非常棘手，但它絕對可行。

畫布與其他任何塊級元素一樣，因此相同的事件適用並以相同的方式綁定。

下面是與畫布交互的鼠標事件的一個示例。在這個例子中，事件綁定到文檔，但類似的想法適用。

http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/