前言
前面的文章写过使用Canvas如何实现滑动验证功能、随机字符串验证功能等，今天我们看看如何实现一个计算验证码。
之前的文章有写过Canvas系列小功能文章，有兴趣的可以瞧上一瞧~
Canvas系列-下雪特效
Canvas系列-签字功能
Canvas系列-滑动验证
Canvas系列-字符验证
实现随机字符串验证功能
效果图如下，源码链接
canvas计算验证演示.gif
基本思路
1、根据传入的range范围生成两个随机数字，并记录下来
2、然后随机拿到一个运算符和数字一起拼接成表达式，类似【12+22=?】
3、在canvas画布中绘制随机生成的字符，然后绘制干扰线条和圆点
4、根据规则验证输入的答案和生成的表达式结果比较
具体实现代码
// HTML
<div id="app" v-cloak>
<div class="verify-character" :style="{width: `${width}px`}">
<canvas class="canvas_character"
ref="canvas_character"
:width="width"
:height="height"
@click="reset">
</canvas>
<div class="verfify-input">
<input class="input" type="text" v-model="inputValue">
<button @click="reset">重新加载</button>
</div>
</div>
<br>
<button :class="['confirm', state]" @click="verify">
{{ {active:'验证', success:'验证通过', fail:'验证失败'}[state] }}
</button>
</div>
// JS
const App = {
props: {
width: {
type: Number,
default: 320
},
height: {
type: Number,
default: 60
},
range: {
type: Number,
default: 100
},
operator: {
type: Array,
default: ['+', '-']
}
},
data() {
return {
num1: 0,
num2: 0,
symbol: '+',
result: 0, // 计算结果
inputValue: '',
state: 'active', // 验证 成功 失败
}
},
mounted () {
this.init()
},
methods: {
init () {
this.$nextTick(() => {
this.ctx = this.$refs['canvas_character'].getContext('2d');
this.drawFormula();
})
},
// 绘制图形码
drawFormula () {
this.ctx.fillStyle = this.randomColor(180, 240);
this.ctx.fillRect(0, 0, this.width, this.height);
// 绘制干扰线
for (let j = 0; j < 3; j++) {
this.ctx.strokeStyle = this.randomColor(40, 180)
this.ctx.beginPath()
this.ctx.moveTo(this.randomNum(0, this.width), this.randomNum(0, this.height))
this.ctx.lineTo(this.randomNum(0, this.width), this.randomNum(0, this.height))
this.ctx.stroke()
}
// 绘制干扰点
for (let k = 0; k < 30; k++) {
this.ctx.fillStyle = this.randomColor(0, 255)
this.ctx.beginPath()
this.ctx.arc(this.randomNum(0, this.width), this.randomNum(0, this.height), 1, 0, 2 * Math.PI)
this.ctx.fill()
}
let formula = ''; // 公式字符串
this.num1 = Math.floor(Math.random() * this.range);
this.num2 = Math.floor(Math.random() * this.range);
this.symbol = this.operator[Math.floor(Math.random() * 2)];
console.log(this.num1, this.num2, this.symbol)
if (this.symbol === '+') {
formula = `${this.num1}+${this.num2}=?`
this.result = this.num1 + this.num2;
} else {
if (this.num1 >= this.num2) {
formula = `${this.num1}-${this.num2}=?`
} else {
formula = `${this.num2}-${this.num1}=?`
}
this.result = Math.abs(this.num1 - this.num2);
}
console.log(formula)
for (let i = 0; i < formula.length; i++) {
// 随机生成字体颜色
this.ctx.fillStyle = this.randomColor(50, 160);
// 随机生成字体大小(0.5 - 0.75)高的范围
this.ctx.font = this.randomNum(this.height * 2 / 4, this.height * 3 / 4) + 'px SimHei';
// 字体对齐位置
this.ctx.textBaseline = 'top';
let x = 20 + i * (this.width / formula.length);
let y = this.randomNum(5, this.height / 4);
this.ctx.fillText(formula[i], x, y);
}
},
randomColor (min, max) {
let r = this.randomNum(min, max)
let g = this.randomNum(min, max)
let b = this.randomNum(min, max)
return 'rgb(' + r + ',' + g + ',' + b + ')'
},
randomNum (min, max) {
return Math.floor(Math.random() * (max - min) + min)
},
reset () {
this.result = 0;
this.inputValue = '';
this.state = 'active';
this.drawFormula();
},
verify () {
console.log('输入>>>', parseInt(this.inputValue))
console.log('生成>>>', this.result)
console.log(parseInt(this.inputValue) === this.result)
let res = parseInt(this.result) === parseInt(this.inputValue);
this.state = res ? 'success' : 'fail';
this.$emit('verify', res);
}
}
}
Vue.createApp(App).mount('#app');
解析：先获取画布和画笔，然后使用fillRect()方法渲染随机颜色背景，接下来最重要的部分就是随机生成表达式并使用fillText()方法绘制随机字符，然后使用stroke()方法绘制线条，使用fill()方法绘制随机分布的小圆点，最后验证表达式。
结尾
上面就是【计算验证码】的实现原理，代码是使用vue编写的小demo，可能存在一些兼容性问题，也没有封装成组件，但是具有一些参考意义，用于生产可以自己去封装成组件使用，完整的代码在我的GitHub仓库
本文是笔者总结编撰，如有偏颇，欢迎留言指正，若您觉得本文对你有用，不妨点个赞~
