微信小程序图形验证码
<
canvas
class=
'canvas'
style=
"width:{{cvs.width}};height:{{cvs.height}};"
canvas-id=
"canvas"
bindtap=
'onReady'>
canvas
>
定义类的时候最好定义成canvas类，便于可以进行css样式调节
字母和数字的组合（4个）
let Mcaptcha =
require(
'../../utils/mcaptcha.js');
onReady:
function () {
var that =
this;
var num = that.getRanNum();
// console.log(num)
this.setData({
num: num
})
new Mcaptcha({
el:
'canvas',
width:
80,//对图形的宽高进行控制
height:
30,
code: num
});
},
getRanNum:
function () {
var chars =
'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var pwd =
'';
for (
var i =
0; i <
4; i++) {
if (Math.random() <
48) {
pwd += chars.charAt(Math.random() *
48 -
1);
}
}
return pwd;
},
//mcaptcha.js
module.exports =
class Mcaptcha {
constructor(options) {
this.options = options;
this.fontSize = options.height *
3 /
4;
this.init();
this.refresh(
this.options.code);
}
init() {
this.ctx = wx.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) {
let arr = (code +
'').split(
'');
if (arr.length ===
0) {
arr = [
'e',
'r',
'r',
'o',
'r'];
};
let offsetLeft =
this.options.width *
0.6 / (arr.length -
1);
let marginLeft =
this.options.width *
0.2;
arr.forEach((item, index) => {
this.ctx.setFillStyle(
this.randomColor(
0,
180));
let size =
this.randomNum(
24,
this.fontSize);
this.ctx.setFontSize(size);
let dis = offsetLeft * index + marginLeft - size *
0.3;
let deg =
this.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) {
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 +
")";
}
}