React =＞ js+canvas四位数字字母混合验证码(数字+大写字母+小写字母)
文章目录
- 此为最终实现效果!
- 开始进行编写
- html添加canvas标签
- ref讲解
- 页面初始化生成验证码
- 设置生成随机数函数 randomNum()
- 设置干扰线函数drawLine()
- 绘制路径 (path)
- 设置生成字体颜色和大小及位置 drawText()
- 生成字母数字组合 randomCode()
- 设置点击事件
- 验证验证码是否正确
此为最终实现效果!
点击图片可切换验证码
开始进行编写
html添加canvas标签
<canvasonClick={this.reloadPic} //点击切换事件ref={this.canvas} //ref含义下面讲解width="100"height="40" //设置高度宽度></canvas>
ref讲解
组件内的标签都可以定义 ref 属性来标识自己
1.通过React.createRef()创建Refs并通过ref属性联系到React组件
2.当一个ref通过render放入一个元素中，一个对节点的引用可以通过ref的current属性得到
页面初始化生成验证码
//页面初始化后获取canvas组件,并在canvas组件内生成验证码componentWillMount() {this.canvas = React.createRef();}componentDidMount() {this.randomCode();}
### 设置初始值```javascriptconstructor(props) {super(props);this.state = {code: "",codeLength: 4,//验证码长度contentWidth: 96,contentHeight: 38,//内容高度/宽带showError: false,};}
设置生成随机数函数 randomNum()
//生成一个随机数randomNum = (min, max) => {return Math.floor(Math.random() * (max - min) + min);};//生成一个随机颜色randomColor(min, max) {const r = this.randomNum(min, max);const g = this.randomNum(min, max);const b = this.randomNum(min, max);return `rgb(${r}, ${g}, ${b})`;}
设置干扰线函数drawLine()
具体绘制请看下面 ->绘制路径(path)
// 绘制干扰线drawLine(ctx) {for (let i = 0; i < 1; i++) {ctx.strokeStyle = this.randomColor(40,180);//strokeStyle = color 设置图形轮廓的颜色ctx.beginPath();ctx.moveTo(this.randomNum(0, this.state.contentWidth),this.randomNum(0, this.state.contentHeight));ctx.lineTo(this.randomNum(0, this.state.contentWidth),this.randomNum(0, this.state.contentHeight));ctx.stroke();}}//绘制干扰点drawDot(ctx) {for (let i = 0; i < this.state.contentWidth/4; i++) {ctx.fillStyle = this.randomColor(0, 255);//fillStyle = color 设置图形的填充颜色ctx.beginPath();ctx.arc(this.randomNum(0, this.state.contentWidth),this.randomNum(0, this.state.contentHeight),1,0,2 * Math.PI);ctx.fill();}}
绘制路径 (path)
使用路径绘制图形需要一些额外的步骤：
1.创建路径起始点
2.调用绘制方法去绘制出路径
3.把路径封闭
4.一旦路径生成，通过描边或填充路径区域来渲染图形。
下面是需要用到的方法：
1.beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
2.moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
3.closePath()
闭合路径之后，图形绘制命令又重新指向到上下文中
4.stroke()
通过线条来绘制图形轮廓
5.fill()
通过填充路径的内容区域生成实心的图形
设置生成字体颜色和大小及位置 drawText()
drawText(ctx, txt, i) {//随机生成字体颜色 调用随机数函数ctx.fillStyle = this.randomColor(100, 200);//随机生成字体大小字号 调用随机数函数const fontSize = this.randomNum(10, 20);ctx.font = fontSize + "px SimHei"; //给字号加单位,生成字体//设置位置const padding = 10;//偏移量 const offset = (this.state.contentWidth - 40) (this.state.code.length - 1);let x = padding;if (i > 0) {x = padding + i * offset;}//调用随机数函数let y = this.randomNum(20, this.state.contentHeight - 5);const deg = this.randomNum(-10, 10);// 设置坐标原点和旋转角度ctx.translate(x, y);ctx.rotate((deg * Math.PI) / 180);ctx.fillText(txt, 0, 0);// 恢复坐标原点和旋转角度ctx.rotate((-deg * Math.PI) / 180);ctx.translate(-x, -y);}
生成字母数字组合 randomCode()
//生成字母数字数组randomCode() {let random = "";const str = "QWERTYUPLKJHGFIODSAZXCVBNMqwlioertyupkjhgfdsazxcvbnm1234567890";for (let i = 0; i < this.state.codeLength; i++) {const index = Math.floor(Math.random() * 57);//取得随机数的索引（0~57）random += str[index];//根据索引取得随机数加到code上 }this.setState({ code: random,//赋值给code },() => {const canvas = this.canvas.current;//拿到canvas组件 如果不懂请看ref讲解const ctx = canvas.getContext("2d");//getContext("2d") 对象是内建的 HTML5 对象//拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法ctx.textBaseline = "bottom";//textBaseline = value 基线对齐选项//常用值：top, hanging, middle, bottom。// 绘制背景颜色ctx.fillStyle = this.randomColor(10, 200 );//fillStyle = color 设置图形的填充颜色ctx.fillRect(0, 0, this.state.contentWidth, this.state.contentHeight);//fillRect(x, y, width, height)：绘制一个填充的矩形。 for (let i = 0; i < this.state.code.length; i++) {this.drawText(ctx, this.state.code[i], i);//调用生成字体颜色和大小及位置函数}this.drawLine(ctx); //调用绘制干扰线函数 如同的线条// this.drawDot(ctx);//调用绘制干扰点函数 个人觉得不好看 但是也可以讲解一下,后文会在干扰线后面写});}
设置点击事件
reloadPic = () => {this.randomCode();//调用生成字母数字组合函数 //同时this.props.form.setFieldsValue({sendcode: "", //清空输入框的验证码});};
验证验证码是否正确
//验证验证码是否正确changeCode = (e) => {//toLowerCase()的意思是把字符串所有英文字母转为小写//对验证码进行验证 var code=e.target.value.toLowerCase();//得到当前输入的值var v_code=this.state.code.toLowerCase();//当前canvas验证码的值//判断是否相等,不相等则更新if(code!==''&&code!==v_code){this.setState({showError: true,});}else{this.setState({showError: false,});}}
完成!如有不懂的请在在下方留言
React =＞ js+canvas四位数字字母混合验证码(数字+大写字母+小写字母)相关推荐
- JS实现数字字母混合验证码(数字+大写字母+小写字母)
我之前写了一篇<JS实现随机验证码>,可以产生随机数字.随机颜色.随机位置,但只能产生数字验证码,今天在此基础上进行改进,使之可以随机大写字母.小写字母.数字三种类型. 思路 我们使用Ma ...
- 用机器学习sklearn+opencv-python过古诗文网4位数字+字母混合验证码
目录 获取验证码图片 用opencv-python处理图片 制作训练数据集 训练模型 识别验证码 编写古诗文网的登录爬虫代码 总结与提高 源码下载 在本节我们将使用sklearn和opencv-pyt ...
- （汇编）输出数字、大写、小写字母
问题:内存自source开始有20个数字.大写字母.小写字母的混合串(比如:1234567890abceFGHIJ)编程将其中的数字符号挑选出来存储到dst开始的内存中,做一个菜单,选1,2,3分别输 ...
- 编写程序，如果输入的是大写字母，则输出对应的小写字母，如果输入的是小写字母，则输出对应的大写字母；如果输入的是数字，原样输出；按回车结束
直接上代码: ;如果输入的是大写字母,则输出对应的小写字母, ;如果输入的是小写字母,则输出对应的大写字母: ;如果输入的是数字,原样输出:按回车结束 ;A = 41h Z = 5ah ;我们假设输入 ...
- Python编写程序，实现对输入字符串的大小写字母翻转（即大写变小写、小写变大写）操作
该程序通过两种方式来实现字母的翻转,一种是通过普通方式,另一种是通过自定义函数的方式来实现,该程序还对用户的输入可靠性进行判断,用户输入的必须是字母,如果输入数字,python程序会提示用户输入错误, ...
- Python程序输入一个字符串并查找总数的大写和小写字母
Given a string str1 and we have to count the total numbers of uppercase and lowercase letters. 给定字符串 ...
- [转载] Python程序输入一个字符串并查找总数的大写和小写字母
参考链接: Python程序可大写字符串中每个单词的第一个和最后一个字符 Given a string str1 and we have to count the total numbers of u ...
- 输入字符串，统计其中大写，小写字母，数字，其他字符。
import java.util.*; public class QQQ { public static void main(String[] args) { Scanner ...
- python生成随机的大写字母_Python — 随机生成10个大写、小写字母、特殊字符 string模块...
import string string.ascii_letters #py3 这个函数把大小写都包括进去了 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJK ...
最新文章
- DL之CNN：卷积神经网络算法应用之卷积神经网络实践技巧(DA/DP/WI/BN/H/O/R)、优化技术经验之详细攻略
- php调用python pkl_Python Pickle的任意代码执行漏洞实践和Payload构造
- 中原大学 php,中原大学php全集视频教程
- android java 调用js,Android中Java和JavaScript交互实例
- VBSCRIPT的循环挺好理解的
- Ubuntu 15.10 默认壁纸？
- PHP学习笔记一（基础）
- Codeforces Round #552 (Div. 3)
- 【优化算法】多目标水母搜索优化算法 (MOJS) 【含Matlab源码 248期】
- abbr和acronym标签的使用
- 计算机无法共享访问受限,设置组策略解决共享访问受限问题
- Malformed \uxxxx encoding问题的多种完美解决方法总结
- 年轻人纵横职场高情商话术
- 有关三次握手，四次挥手的超详细总结！！！
- 【转摘】著名画家毕建勋 学画笔记
- 关于 Redis 的 懒惰删除 （十三）
- 服务器系统如何玩dnf台服,如何通过台服流出的服务端自己架设DNF
- 1718: 身体质量指数
- 多旋翼无人机仿真 rotors_simulator：roll pitch yawrate thrust 控制器
- 20th Century Fox — 利用机器学习来预测电影观众