微信小程序绘制验证码（canvas）

一、index.wxml

二、js

data: {
verificationcode:"",
text:"",
}

 change: function() {
    var that = this;
    this.drawPic(that);


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) {
  
    wx.createSelectorQuery()
    .select('#canvas') // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)

        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();
        }
      // console.log(ctx)
        // ctx.draw(false, function() {
           that.setData({
               text: text
           })
        // });
    })



onLoad(option) {
var that = this;
    this.drawPic(that);
}

三、实现效果（css样式自己调整即可）