約定

本文介紹的三種方法適用於識別canvas內形狀不規則而且位置無規律的圖形點選事件，對於形狀規則或者位置有規律的場景，肯定有更簡便的實現，這裡不做討論。

畫素法

畫素檢測法的思路是，將canvas中的多個圖形（如果有多個的話）分別離屏繪製，並用getImageData()方法分別獲取到畫素資料儲存起來。當canvas元素監聽到點選事件時，通過點選座標可以直接推算出點擊發生在canvas上的第幾個畫素，然後遍歷前面儲存的圖形資料，看看這個畫素的alpha值是不是0，如果是0說明落點不在當前圖形內，否則就說明點到了這個圖形。

根據點選座標得到所點選的畫素序號的方法：

畫素序號 = (縱座標-1) * canvas寬度 + 橫座標

比如在寬度為 5 的畫布上點選座標(3,3)，根據上述公式得到畫素序號是(3-1) * 5 + 3 = 18，如圖所示：

因為canvas匯出的圖形資料是將每個畫素以rgba的順序存成4個數字組成的陣列，所以想訪問指定畫素的alpha值，只要讀取這個陣列的第pIndex * 4 + 3個值就可以了，如果這個值不為0，說明該畫素可見，也就是點選到了該圖形。

這個方法是我認為思路最直接、結果最準確、而且對圖形形狀沒有任何要求的方法，但這個方法有一個致命的侷限，當圖形需要在畫布上移動時，要頻繁的建立資料快取才能保證檢測結果準確，受到畫布尺寸和圖形數量的影響，getImageData()方法的效能會成為嚴重的瓶頸。所以如果canvas圖形是靜態的，這個方法非常適合，否則就不適合用這個方法了。

角度法

角度判斷法的原理很容易理解，如果一個點在多邊形內部，則該點與多邊形所有頂點兩兩構成的夾角，相加應該剛好等於360°

計算過程可以轉變為以下三個步驟：

1. 已知多邊形頂點和已知座標，將座標與頂點兩兩組合成三點佇列

2. 已知三點求夾角，可以使用餘玄定理

3. 判斷夾角之和是否360°

每一步都很簡單，實現如下：

//計算兩點距離
const getDistence = function (p1, p2) {
  return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y))
};

//角度法判斷點在多邊形內部
const
 
 checkPointInPolyline = (point, polylinePoints) => {
    let totalA = 0;
    const A = point;
    for (let i = 0; i < polylinePoints.length; i++) {
       let B, C;
        if (i === polylinePoints.length - 1) {
            B = {
                x: polylinePoints[i][0],
                y: polylinePoints[i][1]
            };
            C = {
                x: polylinePoints[0][0],
               y: polylinePoints[0][1]
            };
        } else {
            B = {
                x: polylinePoints[i][0],
                y: polylinePoints[i][1]
            };
            C = {
                x: polylinePoints[i + 1][0],
               y: polylinePoints[i + 1][1]
            };
        }
        //計算角度
        const angleA = Math.acos((Math.pow(getDistence(A, C), 2) + Math.pow(getDistence(A, B), 2) - Math.pow(getDistence(B, C), 2)) / (2 * getDistence(A, C) * getDistence(A, B)))
        totalA += angleA
    }
   //判斷角度之和
    return totalA === 2 * Math.PI
}

這個方法有一個侷限性，就是圖形必須是凸多邊形。如果不是凸多邊形需要先切割成凸多邊形再計算，這就比較複雜了。

類似的思路還有面積法，如果一個點在多邊形內部，那麼該點與多邊形所有頂點兩兩構成的三角形，面積相加應該等於多邊形的面積，首先計算多邊形的面積就很麻煩，所以這種方法可以直接pass掉。

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com

射線法

射線法是一個我講不清道理但非常好用的方法，只要判斷點與多邊形一側的交點個數為奇數，則點在多邊形內部。需要注意的是，只要數任何一側的焦點個數就可以，比如左側。這個方法不限制多邊形的型別，凸多邊形、凹多邊形甚至環形都可以。

實現起來也非常簡單：

const checkPointInPolyline = (point, polylinePoints) => {
    //射線法
  let leftSide = 0;
  const A = point;
  for (let i = 0; i < polylinePoints.length; i++) {
    let B, C;
   if (i === polylinePoints.length - 1) {
      B = {
        x: polylinePoints[i][0],
        y: polylinePoints[i][1]
      };
      C = {
        x: polylinePoints[0][0],
        y: polylinePoints[0][1]
      };
    } else {
      B = {
        x: polylinePoints[i][0],
        y: polylinePoints[i][1]
      };
      C = {
        x: polylinePoints[i + 1][0],
        y: polylinePoints[i + 1][1]
      };
    }
    //判斷左側相交
    let sortByY = [B.y, C.y].sort((a,b) => a-b)
    if (sortByY[0] < A.y && sortByY[1] > A.y){
      if(B.x<A.x || C.x < A.x){
        leftSide++
      }
    }
  }
  return leftSide % 2 === 1
}

射線法有一種特殊情況，當點在多變形的一條邊上時需要特殊處理。但在工程中我認為也可以不處理，因為如果使用者剛好點在圖形的邊界上，那麼程式認為他沒有點到也講的過去。