Demo - canvas實現(xiàn)設置、驗證九宮格手勢密碼

AlienZHOU 發(fā)布于2019-08-20 15:25 / 3223人閱讀

摘要：若匹配，則存入或驗證密碼從或獲取到密碼，判斷是否匹配未獲取到密碼，輸出提示若中途變更單選按鈕，重置臨時存儲的繪制密碼及判斷是否首次輸入的狀態(tài)，防止誤操作可能出現(xiàn)的

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

Demo演示地址

github傳送門

思路

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

頂部標題

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

手勢繪制區(qū)域

這里讓繪制區(qū)域寬度去自適應，控制變量法嘛~

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

動態(tài)獲取窗口可見寬度作為canvas寬度，計算圓的間隔距離

根據(jù)上述參數(shù)計算九個點的原點位置

繪制九個圓點

綁定touch三個事件并響應。繪制密碼記錄在LinePoint數(shù)組里

touchstart 時判斷當前觸摸點和圓點的距離是否小于圓的半徑，如果為真則記錄當前圓點

touchmove 同樣判斷觸摸點與圓點距離，并在繪制過程中根據(jù)記錄數(shù)據(jù)繪制線條

touchend 判斷繪制密碼是否符合規(guī)范，并根據(jù)單選框狀態(tài)做出相應事件相應

提示信息

不同狀態(tài)下提示用戶操作

單選按鈕組

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

設置密碼

首次輸入時，記錄首次繪制密碼

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

驗證密碼

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

未獲取到密碼，輸出提示

若中途變更單選按鈕，重置臨時存儲的繪制密碼及判斷是否首次輸入的狀態(tài)，防止誤操作可能出現(xiàn)的bug~

GPU云服務器云服務器 html設置九宮格九宮格九宮格圖九宮格源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82230.html

用 canvas 實現(xiàn) Web 手勢解鎖

摘要：畫線畫線需要借助來完成，也就是，當我們的時候，傳入開始時的相對坐標，作為線的一端，當我們的時候，獲得坐標，作為線的另一端，當我們的時候，開始畫線。有兩個函數(shù)，獲得當前的相對坐標獲得觸摸點的相對位置相對坐標畫線畫線然后就是監(jiān)聽的和事件了。最近參加 360 暑假的前端星計劃，有一個在線作業(yè)，截止日期是 3 月 30 號，讓手動實現(xiàn)一個 H5 手勢解鎖，具體的效果就像原生手機的九宮格解鎖那...

MycLambert 2019-08-20 15:31 評論0 收藏0
前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

LiangJ 2019-08-30 12:58 評論0 收藏0
前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

codercao 2019-08-19 18:10 評論0 收藏0
前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

huayeluoliuhen 2019-08-01 15:13 評論0 收藏0
基于Vue實現(xiàn)拖拽升級（九宮格拖拽）

摘要：前言在本文中將會用完成九宮格拖拽效果，同時介紹一下網格布局。到這里我們就把基于的九宮格拖拽實現(xiàn)了，有問題或者發(fā)現(xiàn)錯誤的請指正，謝謝大家珍惜淡定的心境，苦過后更加清前言在本文中將會用Vue完成九宮格拖拽效果，同時介紹一下網格布局。具體代碼以及demo可以點以下超鏈接進入傳送門：Demo以及完整代碼連接效果實例 showImg(https://segmentfault.com/im...

RyanQ 2019-08-29 15:13 評論0 收藏0