<template><gui-page><view slot="gBody"><view class="content"><!-- 驗證碼 --><view class="firsts_s" style="margin-top: 25rpx;"><view class="firsts_s_l"><view class="first-input"><input type="text" value="" placeholder="驗證碼"placeholder-style="font-size:29rpx;color:#999" v-model="verCode" /></view></view><view class="firsts_s_r" @click="click"><canvas :style="{width:width+'px',height:height+'px'}" canvas-id="canvasW"@error="canvasT"></canvas></view></view></view></view></gui-page></template><script>export default {data() {return {verCode: "",width: 400,height: 45}},onLoad() {},onShow() {var that = this;setTimeout(function() {that.init();}, 100)},methods: { click(){this.init()},init: function() {var context = uni.createCanvasContext('canvasW', this),w = this.width,h = this.height;context.setFillStyle("white");context.setLineWidth(5);context.fillRect(0, 0, w, h);var pool = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],str = '';for (var i = 0; i < 4; i++) {var c = pool[this.rn(0, pool.length - 1)];var deg = this.rn(-30, 30);context.setFontSize(18);context.setTextBaseline("top");context.setFillStyle(this.rc(80, 150));context.save();context.translate(30 * i + 15, parseInt(h / 1.5));context.rotate(deg * Math.PI / 180);context.fillText(c, -15 + 5, -15);context.restore();str += c;}uni.setStorage({key: 'imgcode',data: str,});for (var i = 0; i < 40; i++) {context.beginPath();context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);context.closePath();context.setFillStyle(this.rc(150, 200));context.fill();}context.draw();},rc: function(min, max) {var r = this.rn(min, max);var g = this.rn(min, max);var b = this.rn(min, max);return "rgb(" + r + "," + g + "," + b + ")";},rn: function(max, min) {return parseInt(Math.random() * (max - min)) + min;},canvasT: function(e) {console.error(e.detail.errMsg)}}} </script>

總結

以上是生活随笔為你收集整理的uniapp实现动态生成随机图形验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。