微信小程序——有关图形验证码的所有信息

今天写一个有关图形验证码的笔记，先看效果图：

第一个问题图形验证码怎么制作出来的呢？看代码：
wxml:

	<canvas canvas-id="canvas" bindtap='change' style="width:200rpx;height: 70rpx;" ></canvas>

CSS 样式写在这里就是随手，方便。
JS：

// indexSecond/pages/helpTake/helpTake.js
var app = getApp();
var baseUrl = getApp().baseUrl;
var ctx;
Page({

      /**
       * 页面的初始数据
       */
      data: {
        btn_disabled: true,
        Number: true,
        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);
        }