微信小程序 自定义本地验证码

微信小程序中，自定义本地验证码

// utils/code.js

// 随机数字
function randomNum (min, max) {
  return Math.floor(Math.random() * (max - min) + min);
};

// 随机颜色
function randomColor () {
  let r = randomNum(1, 255);
  let g = randomNum(1, 255);
  let b = randomNum(1, 255);
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}

// 绘制文字,
function drawFont (id) {
  // 获取canvas
  let ctx = wx.createCanvasContext(id);
  let canvas_width = 120;
  let canvas_height = 45;

  let canvas_bg = 'rgba(255,255,255,0.2)';
  let canvas_code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';
  let canvas_line = ['#2660F6', '#2a9ad2', '#ffffff'];

  let success_text = '';

  ctx.setFillStyle(canvas_bg);
  ctx.fillRect(0, 0, canvas_width, canvas_height);
  for (let i = 1; i <= 4; i++) {
    let deg = randomNum(0, 10);
    let x = i * (canvas_width / 4) - (canvas_width / 4) / 2;
    let y = canvas_height / 2;
    let txt = canvas_code[randomNum(1, canvas_code.length)];
    success_text += txt;

    ctx.translate(x, y);
    ctx.rotate(deg * Math.PI / 180);

    ctx.setFontSize(16);
    ctx.setFillStyle('#fff');
    ctx.setTextBaseline('middle');
    ctx.fillText(txt, 0, 0);
    ctx.rotate(-deg * Math.PI / 180);
    ctx.translate(-x, -y);
  }
  for (let j = 0; j <= 4; j++) {
    ctx.beginPath();
    // ctx.strokeStyle = canvas_line[randomNum(1, canvas_line.length)];
    ctx.setStrokeStyle(randomColor());
    ctx.moveTo(randomNum(0, canvas_width), randomNum(0, canvas_height));
    ctx.setLineWidth(2);
    ctx.lineTo(randomNum(0, canvas_width), randomNum(0, canvas_height));
    ctx.stroke();
  }


  ctx.draw()

  return success_text;
}

export default drawFont;

// contact.js

import drawFont from '../../utils/code.js';

// 获取验证码当前的值和 输入框的值对比即可。每点击一次重新执行一遍reDraw即可。
reDraw() {
  let curCode = drawFont('firstCanvas');
  this.setData({
    curCode: curCode
  });
},
onLoad: function () {
  this.reDraw();
}

\