寫在前面

這里是常用驗(yàn)證碼的第二篇——算術(shù)驗(yàn)證碼。
在上一篇已經(jīng)實(shí)現(xiàn)了常用驗(yàn)證碼之字符串驗(yàn)證碼，感興趣的可以去看一下~
接下來(lái)要實(shí)現(xiàn)的就是字符串驗(yàn)證碼了，先看下效果：

算術(shù)驗(yàn)證碼示例

本篇記錄純前端寫算術(shù)驗(yàn)證碼。

實(shí)現(xiàn)：算術(shù)驗(yàn)證碼

一般來(lái)講，字符串、算數(shù)、gif、短信語(yǔ)音等驗(yàn)證碼放在后端實(shí)現(xiàn)，但本著技術(shù)無(wú)界限的原則，前端依然是能照葫蘆畫瓢給實(shí)現(xiàn)出來(lái)的。
本次要實(shí)現(xiàn)的效果如下：

效果

效果

分析

驗(yàn)證碼實(shí)現(xiàn)步驟：

• canvas畫布
• 生成隨機(jī)100以內(nèi)的簡(jiǎn)單整數(shù)四則運(yùn)算
• 隨機(jī)顏色
• 背景色（可固定色）
• 噪音線設(shè)置
• 繪制驗(yàn)證碼

其他一些基礎(chǔ)內(nèi)容也包含其中，如點(diǎn)擊驗(yàn)證碼刷新、點(diǎn)擊下一步驗(yàn)證等操作。

步驟實(shí)現(xiàn)：

注：本案例基于vue操作，UI使用element完成，原生js同樣道理

1. canvas畫布

html

<!-- 輸入框 -->
<input v-model="inputCode" placeholder="請(qǐng)輸入右側(cè)圖案的值" />
<!-- canvas畫布：驗(yàn)證碼 -->
<canvas ref="checkCode" @click="getCode"></canvas>
<!-- 按鈕 -->
<button @click="checkMe">下一步</button>

js

// 需要的數(shù)據(jù)
data() {
    return {
        inputCode: '',  // 輸入的值
        checkCode: '',  // 圖片驗(yàn)證碼的值
        expressValue: '',  // 表達(dá)式的值
        // canvas各種設(shè)置
        cvs: {
            w: 100, // 給出默認(rèn)寬度  寬度會(huì)在圖片繪制時(shí)根據(jù)長(zhǎng)度更改
            h: 40,  // 高 與input保持一致
            fontSize: 24,   // 字體大小
            str: '+-*',  // 符號(hào)生成范圍
            line: 3 // 噪音線個(gè)數(shù)
        }
    }
}

2. 生成隨機(jī)表達(dá)式

• 寫一個(gè)隨機(jī)整數(shù)生成器，在各個(gè)環(huán)節(jié)都會(huì)用到
• 生成隨機(jī)字符串，長(zhǎng)度是在data里面cvs中對(duì)應(yīng)長(zhǎng)度

// 隨機(jī)整數(shù)生成器，范圍[0, max)
rInt(max) {
    return Math.floor(Math.random() * 100000 % max);
},

// 生成隨機(jī)表達(dá)式
rCode() {
    let a = this.rInt(100);
    let b = this.rInt(10);
    let op = this.cvs.str.charAt(this.rInt(this.cvs.str.length));
    // 表達(dá)式
    let code = `${a}${op}$=`;
    this.checkCode = code;
    // 表達(dá)式的值
    this.expressValue = eval(code.substr(0, code.length - 1));
    return code;
},

3. 生成隨機(jī)顏色

• rgba格式
• a：透明度，取值為0.5-1

 // 生成隨機(jī)顏色 rgba格式
rColor() {
    let a = ((Math.random()*5 + 5) / 10).toFixed(2);
    return `rgba(${this.rInt(256)}, ${this.rInt(256)}, ${this.rInt(256)}, ${a})`
},

4. 開(kāi)始繪制

• 方法接收一個(gè)dom對(duì)象
• 判斷瀏覽器對(duì)canvas支持程度
• 取隨機(jī)字表達(dá)式
• 設(shè)置canvas寬高大小
• 繪制

具體過(guò)程如下：

// 驗(yàn)證碼圖片繪制
drawCode(domCvs) {
    let _this = this;
    // 隨機(jī)表達(dá)式
    let checkCode = this.rCode();
    // 寬設(shè)置
    this.cvs.w = 10 + this.cvs.fontSize * this.checkCode.length;

    // 判斷是否支持canvas
    if (domCvs !== null && domCvs.getContext && domCvs.getContext('2d')) {
        // 設(shè)置顯示區(qū)域大小
        domCvs.style.width = _this.cvs.w;
        // 設(shè)置畫板寬高
        domCvs.setAttribute('width', _this.cvs.w);
        domCvs.setAttribute('height', _this.cvs.h);
        // 畫筆
        let pen = domCvs.getContext('2d');
        // 背景: 顏色  區(qū)域
        pen.fillStyle = '#eee';
        pen.fillRect(0, 0, _this.cvs.w, _this.cvs.h);
        // 水平線位置
        pen.textBaseline = 'middle';   // top middle bottom
        // 內(nèi)容
        for (let i = 0; i < _this.checkCode.length; i++) {
            pen.fillStyle = _this.rColor(); // 隨機(jī)顏色
            pen.font = `bold ${_this.cvs.fontSize}px 微軟雅黑`; // 字體設(shè)置
            // 字符繪制: (字符, X坐標(biāo), Y坐標(biāo))
            pen.fillText(checkCode.charAt(i), 10 + _this.cvs.fontSize * i, 17 + _this.rInt(10));
        }
        // 噪音線
        for (let i = 0; i < _this.cvs.line; i++) {
            // 起點(diǎn)
            pen.moveTo(_this.rInt(_this.cvs.w) / 2, _this.rInt(_this.cvs.h));
            // 終點(diǎn)
            pen.lineTo(_this.rInt(_this.cvs.w), _this.rInt(_this.cvs.h));
            // 顏色
            pen.strokeStyle = _this.rColor();
            // 粗細(xì)
            pen.lineWidth = '2';
            // 繪制
            pen.stroke();
        }

    } else {
        this.$message.error('不支持驗(yàn)證碼格式，請(qǐng)升級(jí)或更換瀏覽器重試');
    }
},

5. 綁定canvas的dom元素

html

<canvas class="codeCanvas" ref="checkCode" @click="getCode"></canvas>

js：getCode方法

// vue的話可直接用$refs取值，不用vue的話可綁定id然后通過(guò)document處理
let domCvs = this.$refs.checkCode;
this.drawCode(domCvs);

6. 完成~

• 在頁(yè)面初始化的時(shí)候，也來(lái)一個(gè)驗(yàn)證碼

• 點(diǎn)擊下一步， 驗(yàn)證data中inputCode和expressValue的值是否一樣即可。注意，直接使用eval驗(yàn)證即可

• 頁(yè)面初始化

// 初始化先搞一個(gè)驗(yàn)證碼~點(diǎn)擊canvas的時(shí)候重新執(zhí)行g(shù)etCode()
mounted() {
    // 獲取驗(yàn)證碼圖
    this.getCode();
}

• 驗(yàn)證

checkMe() {
    // 空、 錯(cuò)誤、 正確 三個(gè)判斷
    if (this.inputCode) {
        if (eval(this.inputCode) === eval(this.expressValue)) {
            // 驗(yàn)證成功要做的事
            this.$message.success('驗(yàn)證成功');
        } else {
            // 驗(yàn)證碼有誤
            this.$message.warning('錯(cuò)誤，請(qǐng)重新輸入');
        }
    } else {
        // 輸入為空
        this.$message.warning('請(qǐng)輸入右側(cè)結(jié)果');
    }
}

結(jié)語(yǔ)

ok，常用的簡(jiǎn)單算術(shù)驗(yàn)證碼大致就是這樣子了~

本篇案例源碼可關(guān)注公眾號(hào)【流眸】回復(fù)【20630】獲取喲~

流眸