创建一个组件 命名为sidentify.vue
<template>
<div class="s-canvas">
<canvas
@click="getcode"
id="s-canvas"
:width="contentWidth"
:height="contentHeight"
></canvas>
</div>
</template>
<script>
export default {
name: "sidentify",
props: {
identifyCode: {
type: String,
default: "asdf"
}
},
data() {
return {
fontSizeMin: 40,
fontSizeMax: 40,
backgroundColorMin: 180,
backgroundColorMax: 240,
colorMin: 50,
colorMax: 160,
lineColorMin: 40,
lineColorMax: 180,
dotColorMin: 0,
dotColorMax: 255,
contentWidth: 112,
contentHeight: 38
};
},
methods: {
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
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 + ")";
},
drawPic() {
let canvas = document.getElementById("s-canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = this.randomColor(
this.backgroundColorMin,
this.backgroundColorMax
);
ctx.strokeStyle = this.randomColor(
this.backgroundColorMin,
this.backgroundColorMax
);
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
ctx.strokeRect(0, 0, this.contentWidth, this.contentHeight);
for (let i = 0; i < this.identifyCode.length; i++) {
this.drawText(ctx, this.identifyCode[i], i);
}
this.drawLine(ctx);
this.drawDot(ctx);
},
drawText(ctx, txt, i) {
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
ctx.font =
this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";
ctx.textBaseline = "alphabetic";
let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
var deg = this.randomNum(-45, 45);
ctx.translate(x, y);
ctx.rotate((deg * Math.PI) / 180);
ctx.fillText(txt, 0, 0);
ctx.rotate((-deg * Math.PI) / 180);
ctx.translate(-x, -y);
},
drawLine(ctx) {
for (let i = 0; i < 8; i++) {
ctx.strokeStyle = this.randomColor(
this.lineColorMin,
this.lineColorMax
);
ctx.beginPath();
ctx.moveTo(
this.randomNum(0, this.contentWidth),
this.randomNum(0, this.contentHeight)
);
ctx.lineTo(
this.randomNum(0, this.contentWidth),
this.randomNum(0, this.contentHeight)
);
ctx.stroke();
}
},
drawDot(ctx) {
for (let i = 0; i < 100; i++) {
ctx.fillStyle = this.randomColor(0, 255);
ctx.beginPath();
ctx.arc(
this.randomNum(0, this.contentWidth),
this.randomNum(0, this.contentHeight),
1,
0,
2 * Math.PI
);
ctx.fill();
}
},
getcode() {
this.drawPic();
}
},
watch: {
identifyCode() {
this.drawPic();
}
},
mounted() {
this.drawPic();
}
};
</script>
全局引入 挂载 main.js
import sidentify from "./common/sidentify";
Vue.component('sidentify', sidentify)
在需要验证码页面使用(以下都是)
<div @click="refreshCode1()">
<sidentify :identifyCode="identifyCode"></sidentify>
</div>
data数据
identifyCode: "",
identifyCodes: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z",
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
],
相关方法
// 生成随机数
randomNum(min, max) {
max = max + 1;
return Math.floor(Math.random() * (max - min) + min);
},
// 更新验证码
refreshCode1() {
this.identifyCode = "";
this.makeCode(this.identifyCodes, 4);
console.log("生成的验证码是:", this.identifyCode);
},
// 随机生成验证码字符串
makeCode(data, len) {
for (let i = 0; i < len; i++) {
this.identifyCode +=
this.identifyCodes[this.randomNum(0, this.identifyCodes.length - 1)];
}
},
生成验证码 如图所示