微信小程序 图片验证码展示

废话不多说,上代码

一.html页面

<canvas canvas-id="canvas" bindtap='change' style="width:90px;height: 30px;"></canvas>

二，js逻辑

var app = getApp();
var baseUrl = getApp().baseUrl;
var ctx;
Page({
    data:{
        text:""
    },
    onLoad: function(options) {
        var that = this;
        this.drawPic(that);
    },
    change: function() {
        var that = this;
        this.drawPic(that);
    },
    mobile(e) {
        this.setData({
            mobile: e.detail.value
        })
    },
    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(that) {
    ctx = wx.createCanvasContext('canvas');
    /**绘制背景色**/
    ctx.fillStyle = this.randomColor(180, 240); //颜色若太深可能导致看不清
    ctx.fillRect(0, 0, 90, 28)
    /**绘制文字**/
    var arr;
    var text = '';
    var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
    for (var i = 0; i < 4; i++) {
       var txt = str[this.randomNum(0, str.length)];
       ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色
       ctx.font = this.randomNum(20, 26) + 'px SimHei'; //随机生成字体大小
       var x = 5 + i * 20;
       var y = this.randomNum(20, 25);
       var deg = this.randomNum(-20, 20);
       //修改坐标原点和旋转角度
       ctx.translate(x, y);
       ctx.rotate(deg * Math.PI / 180);
       ctx.fillText(txt, 5, 0);
       text = text + txt;
       //恢复坐标原点和旋转角度
       ctx.rotate(-deg * Math.PI / 180);
       ctx.translate(-x, -y);
    }
    /**绘制干扰线**/
    for (var i = 0; i < 4; i++) {
       ctx.strokeStyle = this.randomColor(40, 180);
       ctx.beginPath();
       ctx.moveTo(this.randomNum(0, 90), this.randomNum(0, 28));
       ctx.lineTo(this.randomNum(0, 90), this.randomNum(0, 28));
       ctx.stroke();
    }
    /**绘制干扰点**/
    for (var i = 0; i < 20; i++) {
       ctx.fillStyle = this.randomColor(0, 255);
       ctx.beginPath();
       ctx.arc(this.randomNum(0, 90), this.randomNum(0, 28), 1, 0, 2 * Math.PI);
       ctx.fill();
    }
    ctx.draw(false, function() {
       that.setData({
           text: text
       })
    });
  }
})