微信小程序图形验证码-微信图形验证码不显示-小程序图形验证码-即速应用

微信小程序图形验证码-微信图形验证码不显示-小程序图形验证码

浏览量：4581 时间：2020-04-06 来源：谜一般的章鱼

canvasclass'canvas'style"width:{{cvs.width}};height:{{cvs.height}};"canvas-id"canvas"bindtap'onReady'/canvas定义类的时候最好定义成canvas类，便于可以进行css样式调节1.
字母和数字的组合（4个）
letMcaptcharequire('../../utils/mcaptcha.js');onReady:function(){varthatthis;varnumthat.getRanNum();//console.log(num)this.setData({num:num})newMcaptcha({el:'canvas',width:80,//对图形的宽高进行控制height:30,code:num});},getRanNum:function(){varchars'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';varpwd'';for(vari0;i4;i++){if(Math.random()48){pwd+chars.charAt(Math.random()*48-1);}}returnpwd;},2.
//mcaptcha.js
module.exportsclassMcaptcha{constructor(options){this.optionsoptions;this.fontSizeoptions.height*3/4;this.init();this.refresh(this.options.code);}init(){this.ctxwx.createCanvasContext(this.options.el);this.ctx.setTextBaseline("middle");this.ctx.setFillStyle(this.randomColor(180,240));this.ctx.fillRect(0,0,this.options.width,this.options.height);}refresh(code){letarr(code+'').split('');if(arr.length0){arr['e','r','r','o','r'];};letoffsetLeftthis.options.width*0.6/(arr.length-1);letmarginLeftthis.options.width*0.2;arr.forEach((item,index){this.ctx.setFillStyle(this.randomColor(0,180));letsizethis.randomNum(24,this.fontSize);this.ctx.setFontSize(size);letdisoffsetLeft*index+marginLeft-size*0.3;letdegthis.randomNum(-30,30);this.ctx.translate(dis,this.options.height*0.5);this.ctx.rotate(deg*Math.PI/180);this.ctx.fillText(item,0,0);this.ctx.rotate(-deg*Math.PI/180);this.ctx.translate(-dis,-this.options.height*0.5);})this.ctx.draw();}randomNum(min,max){returnMath.floor(Math.random()*(max-min)+min);}randomColor(min,max){letrthis.randomNum(min,max);letgthis.randomNum(min,max);letbthis.randomNum(min,max);return"rgb("+r+","+g+","+b+")";}}