小編在通過最近做了一個(gè)小需求,就是點(diǎn)擊刪除按鈕,彈出提示彈框讓你輸入驗(yàn)證碼確認(rèn)刪除這個(gè)內(nèi)容分享個(gè)有關(guān)于:“在前端使用canvas顯示驗(yàn)證碼方法總結(jié)!代碼分享! ”這方面的相關(guān)內(nèi)容!希望對大家有所幫助!
那么怎么顯示從后臺獲取的驗(yàn)證碼供用戶輸入呢?我在理解需求時(shí)還以為是后臺直接把驗(yàn)證碼發(fā)到用戶的手機(jī)上 然后讓其輸入,其實(shí)不然,我理解錯(cuò)了,應(yīng)該用 canvas
把驗(yàn)證碼畫出來。
理解需求之后我扒著有驗(yàn)證碼的網(wǎng)址看,開始 canvas
畫圖之旅。
技術(shù)棧: quasar
(基于vue的一種框架) / canvas
點(diǎn)擊刪除按鈕,觸發(fā)彈框彈出
彈框?yàn)槭裁磿棾瞿兀?因?yàn)辄c(diǎn)擊刪除按鈕,觸發(fā) handleAddDialogOpened
事件,使得data里面的 addDialogOpened
由false變成true,彈框就由之前的不顯示變成顯示啦。
如圖代碼是彈框代碼:其中 canvas
標(biāo)簽上的 ref
是多余的,抱歉吶,忘記刪掉了
data
里面定義的數(shù)據(jù):定義 canvas
畫布的寬高
verifyCode_
綁定用戶輸入input框的驗(yàn)證碼
computed
計(jì)算屬性里面 mapState
映射 verifyCode
數(shù)據(jù), mapState
是輔助函數(shù),用于幫助我們簡化生成計(jì)算屬性,不懂的可以扒著 vuex
的官網(wǎng)瞅瞅
mapActions
也是輔助函數(shù),用于將組件的方法映射為 store.dispatch
getVerifyCode
就是向后臺獲取驗(yàn)證的請求方法
canvasclick
方法用于 當(dāng)用戶辨認(rèn)不清驗(yàn)證碼,或者輸入錯(cuò)誤重新輸入時(shí),點(diǎn)擊 換一個(gè)
即可更新驗(yàn)證碼(此時(shí)要重新從后臺獲取驗(yàn)證碼) 后臺小哥哥不打烊吶~~~
核心代碼: drawPic()
方法就是畫驗(yàn)證碼的核心方法
1 獲取畫布標(biāo)簽 使用 getElementById
原生獲取 dom
2 使用 .getContext('2d')
準(zhǔn)備畫布 .textBaseline
定義畫布描繪的基線
3 繪制背景
4 繪制驗(yàn)證碼
5 繪制干擾視覺的線和點(diǎn)
drawText()
繪制驗(yàn)證碼的方法
drawLine()
繪制干擾線的方法
drawDot()
繪制干擾點(diǎn)的方法
定義彈框彈出的方法以及刪除的方法, 回歸需求
,到此這個(gè)需求就完成了 可以和后臺聯(lián)調(diào),沒啥問題就可提交代碼啦
總結(jié):
a. 遇到?jīng)]有做過的需求,要去看看別人怎么做的,目前還沒有難到要你自己創(chuàng)新,沒有任何類比的代碼
b. 善于使用debugger調(diào)試代碼,看看自己代碼那里出了問題,有bug不要慌,喝口水,去debugger打斷點(diǎn)深入理解代碼執(zhí)行邏輯,效率解決
c. 作為社畜大軍的一員,要自律, 要輸出
,要鍛煉,有時(shí)間還要看看代碼大全,地鐵上擼擼MDN文檔,扎實(shí)js, 期待那個(gè)你想成為的你, 共勉
那么以上就是有關(guān)于:“在前端使用canvas顯示驗(yàn)證碼方法總結(jié)!代碼分享! ”這方面的相關(guān)內(nèi)容,更多有關(guān)于html這方面的內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)!