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

稀里糊涂的全栈

已于 2024-11-06 11:35:06 修改

阅读量480

点赞数 3

分类专栏：工作总结及练习文章标签：微信小程序小程序

于 2023-05-06 10:31:33 首次发布

本文链接：https://blog.csdn.net/luckily_star/article/details/130521157

版权

工作总结及练习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中使用canvas组件进行验证码的绘制，包括wxml布局、js逻辑处理和最终效果展示，通过自定义css样式实现验证码的个性化显示。

摘要由CSDN通过智能技术生成

一、index.wxml

 <van-cell-group>
        <van-field v-model="sms" center clearable label="验证码" placeholder="请输入验证码" name="verificationcode" model:value="{{ verificationcode }}">
          <van-button slot="button" size="small" type="default" bindtap='change' custom-style="width:170rpx;height: 60rpx">
            <!-- <canvas canvas-id="canvas"  style="width:200rpx;height: 80rpx;margin-top: 25rpx;margin-left: 20rpx;" ></canvas> -->
            <canvas id="canvas" type="2d" style="width:200rpx;height: 80rpx;margin-top: 25rpx;margin-left: 20rpx;" />
          </van-button>
        </van-field>
 </van-cell-group>

二、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样式自己调整即可）