微信小程序?qū)崿F(xiàn)圖形驗證碼

更新時間：2022年05月26日 15:15:08 作者：php的緋聞女友

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)圖形驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)圖形驗證碼的具體代碼，供大家參考，具體內(nèi)容如下

1.wxml頁面

<canvas canvas-id="canvas" bindtap='change' style="width:90px;height: 30px;"></canvas>

2.js頁面

var app = getApp();
var baseUrl = getApp().baseUrl;
var ctx;
data:{
? ? 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); //顏色若太深可能導(dǎo)致看不清
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);
? ?//修改坐標(biāo)原點和旋轉(zhuǎn)角度
? ?ctx.translate(x, y);
? ?ctx.rotate(deg * Math.PI / 180);
? ?ctx.fillText(txt, 5, 0);
? ?text = text + txt;
? ?//恢復(fù)坐標(biāo)原點和旋轉(zhuǎn)角度
? ?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();
}
ctx.draw(false, function() {
? ?that.setData({
? ? ? ?text: text
? ?})
});

3.效果