Demo - canvas實現設置、驗證九宮格手勢密碼

報了360前端實習生的崗，除了測評、考試外還要作個大做業 25號考的技術綜合的選擇題簡直讓我開始懷疑人生哇 ╥﹏╥ 而後大做業我拿到的題目就是介個，實現手勢密碼的輸入以及驗證

Demo演示地址

github傳送門

思路

graph TD
    A[根據原型圖拆分佈局]
    A --> | top-bar | B[頂部標題]
    A --> | canvas | C[手勢繪製區域]
    A --> | Msg | D[提示信息]
    A --> | radio-group | E[單選按鈕組]

頂部標題

在viewport完美視口下，固定div高度，寬度100%，文字居中則能完成適配~

手勢繪製區域

這裏讓繪製區域寬度去自適應，控制變量法嘛~

1. 設置默認屬性。包括圖形區域與屏幕的邊距、圓半徑、canvas高度（offsetX、offsetY、R、CanvasHeight）

2. 動態獲取窗口可見寬度做爲canvas寬度，計算圓的間隔距離

3. 根據上述參數計算九個點的原點位置

4. 繪製九個圓點

5. 綁定touch三個事件並響應。繪製密碼記錄在LinePoint數組裏

   1. touchstart 時判斷當前觸摸點和圓點的距離是否小於圓的半徑，若是爲真則記錄當前圓點

   2. touchmove 一樣判斷觸摸點與圓點距離，並在繪製過程當中根據記錄數據繪製線條

   3. touchend 判斷繪製密碼是否符合規範，並根據單選框狀態作出相應事件相應

提示信息

不一樣狀態下提示用戶操做

單選按鈕組

未選擇任一按鈕時，提示用戶選擇

1. 設置密碼

   1. 首次輸入時，記錄首次繪製密碼

   2. 二次輸入時，判斷是否匹配首次繪製密碼。若匹配，則存入localStorage或Cookie

2. 驗證密碼

   1. 從localStorage或Cookie獲取到密碼，判斷是否匹配

   2. 未獲取到密碼，輸出提示

若中途變動單選按鈕，重置臨時存儲的繪製密碼及判斷是否首次輸入的狀態，防止誤操做可能出現的bug~