添加登录验证码
fanluyan
2 years ago
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 510 KiB |
|
After Width: | Height: | Size: 635 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 553 KiB After Width: | Height: | Size: 553 KiB |
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="s-canvas">
|
||||
<canvas
|
||||
id="s-canvas"
|
||||
:width="contentWidth"
|
||||
:height="contentHeight"
|
||||
></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SIdentify",
|
||||
props: {
|
||||
identifyCode: {
|
||||
type: String,
|
||||
default: "1234",
|
||||
},
|
||||
fontSizeMin: {
|
||||
type: Number,
|
||||
default: 25,
|
||||
},
|
||||
fontSizeMax: {
|
||||
type: Number,
|
||||
default: 30,
|
||||
},
|
||||
backgroundColorMin: {
|
||||
type: Number,
|
||||
default: 255,
|
||||
},
|
||||
backgroundColorMax: {
|
||||
type: Number,
|
||||
default: 255,
|
||||
},
|
||||
colorMin: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
colorMax: {
|
||||
type: Number,
|
||||
default: 160,
|
||||
},
|
||||
lineColorMin: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
lineColorMax: {
|
||||
type: Number,
|
||||
default: 255,
|
||||
},
|
||||
dotColorMin: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
dotColorMax: {
|
||||
type: Number,
|
||||
default: 255,
|
||||
},
|
||||
contentWidth: {
|
||||
type: Number,
|
||||
default: 112,
|
||||
},
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 36,
|
||||
},
|
||||
},
|
||||
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.textBaseline = "bottom";
|
||||
// 绘制背景
|
||||
ctx.fillStyle = this.randomColor(
|
||||
this.backgroundColorMin,
|
||||
this.backgroundColorMax
|
||||
);
|
||||
ctx.fillRect(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";
|
||||
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 < 5; 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 < 80; 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();
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
identifyCode() {
|
||||
this.drawPic();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawPic();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.s-canvas {
|
||||
height: 36px;
|
||||
}
|
||||
.s-canvas canvas {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||