2017年12月28日
背景
canvas 是一張畫布，僅有一個DOM元素，瀏覽器沒有內置多余的API，所有的交互需要開發直接實現。
幾何計算
規則的幾何形狀，如矩形、圓形等，可通過簡單的數學計算獲得。
應用
這是用 canvas 做的一個關系網絡圖，鼠標可以自由拖動節點。這個場景下交互很簡單，鼠標點擊畫布，在事件中獲取X,Y坐標，然后計算每一個節點，看是否落在這個節點的半徑內。如果是，則標記為選中了。
然而，不規則圖形會大大加大計算復雜度，如涉及貝塞爾曲線、旋轉等。
可使用 “包圍盒” 的方式，將不規則圖形簡單化
包圍盒
把復雜路徑簡單化，再次回歸到方形、圓形等規則圖形上去。
但如果你需要的是一種非常精準無誤差的選取方式，那這種包圍盒方式就不適用了，下面是兩種 canvas 精確選取方式：
1. 把圖形序號存在另一張 canvas 的顏色信息里
需額外新增一張僅用來存信息的canvas（不插入html里面）
當在正常的canvas上繪制圖形時，同時在那張隱式的canvas中也繪制一遍，并把圖形的索引值作為顏色值來繪制圖形
ctx.getImageData(x,y,width,height);
ImageData 對象
R - 紅色 (0-255)
G - 綠色 (0-255)
B - 藍色 (0-255)
A - alpha 通道 (0-255)
2. 利用 isPointInPath() API
重走一遍繪制流程，但不真正的繪制出來（不調用stroke 和 fill ）圖形），而只調用 isPointInPath()方法判斷點是否在圖形中，如果在則終止。
附錄
包圍盒
包圍盒是一種求解離散點集最優包圍空間的算法，基本思想是用體積稍大且特性簡單的幾何體（稱為包圍盒）來近似地代替復雜的幾何對象。
Element.getBoundingClientRect()
返回元素的大小及其相對于視口的位置。
返回值是一個 DOMRect 對象，包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。
