vue中利用canvas生成随机验证码
页面html代码:
此处引入了element-ui组件库
<div class="caCode">
<el-input ref="tel" v-model="userInput" placeholder="请输入验证码"name="tel" type="text" tabindex="1" autocomplete="on" clearable />
<canvas ref="canvas" @click="createCode" width="140" height="60"></canvas>
</div>
初始化调用:
this.createCode();
定义变量用来验证:
code: '', // 验证码字符串
userInput: '' // 用户输入的验证码
函数生成代码:
// 生成验证码
createCode() {
const that = this;
let codeLength = 4; // 验证码长度
let canvas = this.$refs.canvas;
let ctx = canvas.getContext('2d');
let codeChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
let code = '';
for (let i = 0; i < codeLength; i++) {
let charIndex = Math.floor(Math.random() * codeChars.length);
code += codeChars.charAt(charIndex);
}
this.code = code;
// 绘制验证码图片
ctx.fillStyle = that.MathColor(180,230);
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = that.MathNumber(30,40)+'px Arial';
ctx.fillStyle = that.MathColor(80,180);
ctx.fillText(code, 20, 45);
for (var i = 0; i < 6; i++) {
ctx.strokeStyle = that.MathColor(0, 255);
ctx.beginPath();
ctx.moveTo(that.MathNumber(0, canvas.width), that.MathNumber(0, canvas.height));
ctx.lineTo(that.MathNumber(0, canvas.width), that.MathNumber(0, canvas.height));
ctx.stroke();
}
for (var i = 0; i < 50; i++) {
ctx.fillStyle = that.MathColor(0, 255);
ctx.beginPath();
ctx.arc(that.MathNumber(0, canvas.width), that.MathNumber(0, canvas.height), 0.5, 0, 2 * Math.PI);
ctx.fill();
}
},
//随机整数
MathNumber(min, max) {
var n = Math.floor(Math.random() * (max - min) + min);
return n;
},
//随机颜色
MathColor(min, max) {
var r = this.MathNumber(min, max);
var g = this.MathNumber(min, max);
var b = this.MathNumber(min, max);
return `rgb(${r},${g},${b})`;
},
css:
.caCode {
display: flex;
height: 51px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #333;
margin-bottom: 22px;
el-input {
width: 60%;
}
}