成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

AlienZHOU / 3224人閱讀

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

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




Demo演示地址

github傳送門

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

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

手勢(shì)繪制區(qū)域

這里讓繪制區(qū)域?qū)挾热プ赃m應(yīng)，控制變量法嘛~

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

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

根據(jù)上述參數(shù)計(jì)算九個(gè)點(diǎn)的原點(diǎn)位置

繪制九個(gè)圓點(diǎn)

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

touchstart 時(shí)判斷當(dāng)前觸摸點(diǎn)和圓點(diǎn)的距離是否小于圓的半徑，如果為真則記錄當(dāng)前圓點(diǎn)

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

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

提示信息

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

單選按鈕組

未選擇任一按鈕時(shí)，提示用戶選擇

設(shè)置密碼

首次輸入時(shí)，記錄首次繪制密碼

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

驗(yàn)證密碼

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

未獲取到密碼，輸出提示

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82230.html

相關(guān)文章

  • 用 canvas 實(shí)現(xiàn) Web 手勢(shì)解鎖

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

    MycLambert 評(píng)論0 收藏0

  • 前端技術(shù) 博客文章、書籍 積累

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

    LiangJ 評(píng)論0 收藏0

  • 前端技術(shù) 博客文章、書籍 積累

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

    codercao 評(píng)論0 收藏0

  • 前端技術(shù) 博客文章、書籍 積累

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

    huayeluoliuhen 評(píng)論0 收藏0

  • 基于Vue實(shí)現(xiàn)拖拽升級(jí)（九宮格拖拽）

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

    RyanQ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<