canvas 實現隨機驗證碼

canvas 實現隨機驗證碼 - 自定義驗證碼
我的博客 http://taoquns.com/paper/59ba...

---

demo
github

• 漢字 （漢字隨機有不少繁體字，生僻字，最好創建漢字庫）
• 數字
• 字母
• 數字字母混合隨機
• 自定義

---

• hanzi() 隨機漢字
• getLetter() 隨機字母
• getNumber() 隨機數字
• NumberOrLetter() 字母數字混合
• setCode(str) 自定義

demo

html

<div class="wrap">
        <canvas id="code1" class="code" width="70" height="30" ></canvas>
        <canvas id="code2" class="code" width="200" height="50" ></canvas>
        <canvas id="code3" class="code" width="50" height="30" ></canvas>
        <canvas id="code4" class="code" width="100" height="60" ></canvas>
        <canvas id="code5" class="code" width="200" height="30" ></canvas>
        <p class="tips">請輸入驗證碼</p>
        <input type="text" id="value">
    </div>

js

// 引入庫

let cvs1 = document.querySelector("#code1")
let cvs2 = document.querySelector("#code2")
let cvs3 = document.querySelector("#code3")
let cvs4 = document.querySelector("#code4")
let cvs5 = document.querySelector("#code5")

let a1 = new captcha(cvs1)
let a2 = new captcha(cvs2)
let a3 = new captcha(cvs3)
let a4 = new captcha(cvs4)
let a5 = new captcha(cvs5)


a1.hanzi() // 使用隨機漢字
console.log( a1.str )

a2.getLetter() // 隨機字母
console.log( a2.str )

a3.getNumber() // 隨機數字
console.log( a3.str )

a4.NumberOrLetter() // 字母數字 混合
console.log( a4.str )

a5.setCode("自定義驗證碼") // 自定義驗證碼
a5.disturb()