微信小程序?qū)崿F(xiàn)圖形驗(yàn)證碼
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)圖形驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
1.wxml頁(yè)面
<canvas canvas-id="canvas" bindtap='change' style="width:90px;height: 30px;"></canvas>
2.js頁(yè)面
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); }, /**生成一個(gè)隨機(jī)色**/ 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 + ")"; }, ? /**繪制驗(yàn)證碼圖片**/ 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); //隨機(jī)生成字體顏色 ? ?ctx.font = this.randomNum(20, 26) + 'px SimHei'; //隨機(jī)生成字體大小 ? ?var x = 5 + i * 20; ? ?var y = this.randomNum(20, 25); ? ?var deg = this.randomNum(-20, 20); ? ?//修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度 ? ?ctx.translate(x, y); ? ?ctx.rotate(deg * Math.PI / 180); ? ?ctx.fillText(txt, 5, 0); ? ?text = text + txt; ? ?//恢復(fù)坐標(biāo)原點(diǎn)和旋轉(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(); } /**繪制干擾點(diǎn)**/ 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.效果
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 功能函數(shù)小結(jié)(手機(jī)號(hào)驗(yàn)證*、密碼驗(yàn)證*、獲取驗(yàn)證碼*)
- 微信小程序6位或多位驗(yàn)證碼密碼輸入框功能的實(shí)現(xiàn)代碼
- 微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序如何獲取手機(jī)驗(yàn)證碼
- 微信小程序綁定手機(jī)號(hào)獲取驗(yàn)證碼功能
- 微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果
- 微信小程序?qū)崿F(xiàn)發(fā)送驗(yàn)證碼按鈕效果
- 詳解如何使用微信小程序云函數(shù)發(fā)送短信驗(yàn)證碼
相關(guān)文章
JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過(guò)鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過(guò)直接給對(duì)象添加屬性的方式來(lái)增加對(duì)象的屬性,需要的朋友可以參考下2023-07-07js實(shí)現(xiàn)視頻播放時(shí)屏幕顯示水印
這篇文章主要為大家詳細(xì)介紹了js如何實(shí)現(xiàn)視頻播放時(shí)屏幕顯示水印的效果,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握js有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果
本文主要介紹了js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01微信小程序?qū)崿F(xiàn)上傳圖片裁剪圖片過(guò)程解析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)上傳圖片裁剪圖片過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08談?wù)刯avascript中使用連等賦值操作帶來(lái)的問(wèn)題
這篇文章主要介紹了javascript中使用連等賦值操作帶來(lái)的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2015-11-11JavaScript中顏色模型的基礎(chǔ)知識(shí)與應(yīng)用詳解
顏色模型,是用來(lái)表示顏色的數(shù)學(xué)模型。比如最常見(jiàn)的?RGB模型,使用?紅綠藍(lán)?三色來(lái)表示顏色。本文就來(lái)和大家講講JavaScript中顏色模型的基礎(chǔ)知識(shí)與應(yīng)用吧2023-02-02JavaScript獲取移動(dòng)設(shè)備型號(hào)的實(shí)現(xiàn)代碼(JS獲取手機(jī)型號(hào)和系統(tǒng))
這篇文章主要介紹了JavaScript獲取移動(dòng)設(shè)備型號(hào)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03