用canvas顯示驗證碼

最近作了一個小需求，就是點擊刪除按鈕，彈出提示彈框讓你輸入驗證碼確認刪除。

那麼怎麼顯示從後臺獲取的驗證碼供用戶輸入呢？我在理解需求時還覺得是後臺直接把驗證碼發到用戶的手機上 而後讓其輸入，其實否則，我理解錯了，應該用canvas把驗證碼畫出來。

理解需求以後我扒着有驗證碼的網址看，開始canvas畫圖之旅。

技術棧： quasar（基於vue的一種框架） / canvas

• 點擊刪除按鈕，觸發彈框彈出

• 彈框爲何會彈出呢？ 由於點擊刪除按鈕，觸發handleAddDialogOpened事件，使得data裏面的addDialogOpened由false變成true,彈框就由以前的不顯示變成顯示啦。

• 如圖代碼是彈框代碼：其中canvas標籤上的ref是多餘的，抱歉吶，忘記刪掉了

• data裏面定義的數據：定義canvas畫布的寬高
• verifyCode_綁定用戶輸入input框的驗證碼

  

• computed計算屬性裏面mapState映射verifyCode數據，mapState是輔助函數，用於幫助咱們簡化生成計算屬性，不懂的能夠扒着vuex的官網瞅瞅

  

• mapActions也是輔助函數，用於將組件的方法映射爲store.dispatch
• getVerifyCode 就是向後臺獲取驗證的請求方法

  

• canvasclick方法用於 當用戶辨認不清驗證碼，或者輸入錯誤從新輸入時，點擊換一個便可更新驗證碼（此時要從新從後臺獲取驗證碼） 後臺小哥哥不打烊吶~~~
  

  

• 核心代碼：drawPic()方法就是畫驗證碼的核心方法
  • 1 獲取畫布標籤 使用getElementById原生獲取dom
  • 2 使用.getContext('2d')準備畫布 .textBaseline 定義畫布描繪的基線
  • 3 繪製背景
  • 4 繪製驗證碼
  • 5 繪製干擾視覺的線和點

• drawText()繪製驗證碼的方法

  

• drawLine()繪製干擾線的方法

  

• drawDot()繪製干擾點的方法

  

• 定義彈框彈出的方法以及刪除的方法，迴歸需求，到此這個需求就完成了 能夠和後臺聯調，沒啥問題就可提交代碼啦

  

總結：

a. 遇到沒有作過的需求，要去看看別人怎麼作的，目前尚未難到要你本身創新，沒有任何類比的代碼

b. 善於使用debugger調試代碼，看看本身代碼那裏出了問題，有bug不要慌，喝口水，去debugger打斷點深刻理解代碼執行邏輯，效率解決

c. 做爲社畜大軍的一員，要自律，要輸出，要鍛鍊，有時間還要看看代碼大全，地鐵上擼擼MDN文檔，紮實js, 期待那個你想成爲的你， 共勉