如何在html5畫布中獲取特定區域或區域的座標？

Question

我使用畫布創建了一個圓並將其分成幾行。我想要一個特定區域的座標：如果我點擊一個特定的區域，單獨應該是可點擊的。

舉一個文字輪遊戲的例子，其中一個圓圈被分割成許多區域，座標和一些字母放在分割區域內。如果我想用字母「A」點擊特定區域，應點擊「A」並應顯示在文本框中。

我該如何做到這一點？

Answer 1

希望以下內容能讓你開始。

請注意，「帶字母'A'的特定區域被稱爲圓的一個扇區。

假設

x軸是水平的並且正向右

y軸是垂直的並且正向下

角度順時針弧度測量從正x軸

第一扇區開始於角度A

分再圓的是在（CX，CY），並且具有半徑r

圓被分成n個相等的扇區

光標位於的位置（x，y）的

預定義函數數學。 atan2（y，x）返回x軸和線段之間從（0,0）到（x，y） 之間的角度（從-pi和pi），其中i是整數並且i是< = x < +1預定義函數Math.floor（x）返回i

然後

設S是在中心處對每個扇區

S = 2 * PI的角度/ N

創建函數getangle（X，Y，CX，CY），其從0返回角度和通過（CX，CY）在正x方向上的水平線和從（CX，CY）到（x，y）處的線segement之間2PI

僞

​​

現在您可以創建一個函數來檢查光標位於哪個扇區（如果有的話）。

如果光標在圓圈外面，則返回-1，否則返回1到n的扇區號。

僞

function isInSector(x,y) (x,y) coordinates of cursor 
{ 
    // first check if cursor is outside of circle 
    if((cx-x)*(cx-x)+(cy-y)*(cy-y)>r*r) 
    { 
     return -1 
    } 
    // find angle for cursor position 
    B=getangle(x,y,cx,cy) 
    return Math.floor((B-A)/S)+1 
}