小程序图形验证码

该篇文章介绍了如何在微信小程序中使用JavaScript和canvasAPI实现动态验证码的生成，包括随机代码生成、字符颜色和位置的随机变化，以及干扰线和点的绘制。

最近需要使用到图形验证码，起初使用旧版的api

wx.createCanvasContext('myCanvas')

发现官方已经弃用了，不能实现需要的效果了，折腾好久终于使用新版的api做了出来。

做出来的最终效果图：

 在WXview.wxml中，在需要的地方添加以下代码：

<view slot="right-icon">
    <canvas id="myCanvas"
        type="2d" 
        bindtap='change' 
        style="width:120px;height: 60px;"
    >
    </canvas>
</view>

 在WXview.js中：

Page({

    data: {
        // 图形验证码
        text:"",
    }，

    onLoad(options) {
        var that = this;
        this.drawPic(that);
    },
    
    // 更换图形验证码
    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) {
        // ctx = wx.createCanvasContext('canvas');
        var ctx;
        wx.createSelectorQuery()
        .select('#myCanvas') // 在 WXML 中填入的 id
        .node(({ node: canvas }) => {
            canvas.width = 80
            canvas.height = 30
            const ctx12 = canvas.getContext('2d')
            ctx = ctx12
        })
        .exec((res)=>{
            /**绘制背景色**/
            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();
            }
            that.setData({
                text: text
            })
        })
    }

})

以上代码为微信小程序原生代码，可直接复制粘贴就可以运行使用。

想要调整图形验证码画布的大小可以修改这些元素的值：

以及css中的width和height属性，进行大小调整。