米方科技网站建设,牌具做网站,陕煤化建设集团铜川分公司网站,黄骅港在哪个省效果图#xff1a;使用canvas组件对随机的数字字母添加插画背景、干扰线、干扰点
1、在components文件夹下新建securityCode.vue文件#xff0c;代码#xff1a; templatecanvas ids-canvas :widthcontentWidth :heightcontentH…效果图使用canvas组件对随机的数字字母添加插画背景、干扰线、干扰点
1、在components文件夹下新建securityCode.vue文件代码 templatecanvas ids-canvas :widthcontentWidth :heightcontentHeight/canvas
/template
scriptexport default {name: securityCode,props: {identifyCode: {type: String,default: ,},fontSizeMin: {type: Number,default: 22,},fontSizeMax: {type: Number,default: 40,},backgroundColorMin: {type: Number,default: 180,},backgroundColorMax: {type: Number,default: 240,},colorMin: {type: Number,default: 50,},colorMax: {type: Number,default: 160,},lineColorMin: {type: Number,default: 40,},lineColorMax: {type: Number,default: 180,},dotColorMin: {type: Number,default: 0,},dotColorMax: {type: Number,default: 255,},contentWidth: {type: Number,default: 120,},contentHeight: {type: Number,default: 40,},},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) / 330);ctx.fillText(txt, 0, 0);// 恢复坐标原点和旋转角度ctx.rotate((-deg * Math.PI) / 330);ctx.translate(-x, -y);},drawLine(ctx) {// 绘制干扰线for (let i 0; i 3; 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();},};
/script2、在登录页面引入并注册使用组件
el-form-item proppass label验证码 classrow label-width150pxdiv classrow space-between stylewidth: 315px;el-input typetext stylewidth: 190px; v-modelinputCode autocompleteoff/el-inputdiv clickrefreshCode() styleline-height: 0;!--验证码组件--SecurityCode :identifyCodeidentifyCode/SecurityCode/div/div
/el-form-item
el-form-item stylepadding-left: 55px;el-button typeprimary clicksubmitForm() iconel-icon-s-customspan stylefont-size: 15px;letter-spacing: 10px;登录/span/el-button
/el-form-itemscript//导入组件import SecurityCode from /components/securityCode;export default {components: {//注册SecurityCode},data() {identifyCode: ,//随机组合字符串inputCode: , //text框输入的验证码},mounted() {this.refreshCode();},methods: {//初始化验证码refreshCode() {this.inputCode this.identifyCode ; //输入框置空this.makeCode(4); //验证码长度为4},//随机切换验证码makeCode(length) {let code ;for (let i 0; i length; i) {const r Math.floor(Math.random() * 36);if (r 10) {code r;} else {code String.fromCharCode(r - 10 65);}}this.identifyCode codelocalStorage.setItem(code, code);console.log(this.identifyCode);},submitForm(formName) {const code this.inputCode.toLowerCase();const originalCode localStorage.getItem(code).toLowerCase();if (!code) {this.$message.error(请输入验证码);return} else if (code ! originalCode) {this.$message.error(验证码输入错误);this.refreshCode()return}// this.$api.Login({// userName: this.ruleForm.user,// password: this.ruleForm.pass,// systemCode: null,// }).then((data) {// })},}}
/script
