用canvas显示验证码的实现


Posted in HTML / CSS onApril 10, 2020

最近做了一个小需求,就是点击删除按钮,弹出提示弹框让你输入验证码确认删除。

那么怎么显示从后台获取的验证码供用户输入呢?我在理解需求时还以为是后台直接把验证码发到用户的手机上 然后让其输入,其实不然,我理解错了,应该用 canvas 把验证码画出来。

理解需求之后我扒着有验证码的网址看,开始 canvas 画图之旅。

技术栈: quasar (基于vue的一种框架) / canvas

点击删除按钮,触发弹框弹出

用canvas显示验证码的实现

弹框为什么会弹出呢? 因为点击删除按钮,触发 handleAddDialogOpened 事件,使得data里面的 addDialogOpened 由false变成true,弹框就由之前的不显示变成显示啦。

如图代码是弹框代码:其中 canvas 标签上的 ref 是多余的,抱歉呐,忘记删掉了

用canvas显示验证码的实现 

data 里面定义的数据:定义 canvas 画布的宽高

verifyCode_ 绑定用户输入input框的验证码

用canvas显示验证码的实现 

computed 计算属性里面 mapState 映射 verifyCode 数据, mapState 是辅助函数,用于帮助我们简化生成计算属性,不懂的可以扒着 vuex 的官网瞅瞅

用canvas显示验证码的实现 

mapActions 也是辅助函数,用于将组件的方法映射为 store.dispatch

getVerifyCode 就是向后台获取验证的请求方法

用canvas显示验证码的实现 

canvasclick 方法用于 当用户辨认不清验证码,或者输入错误重新输入时,点击 换一个 即可更新验证码(此时要重新从后台获取验证码) 后台小哥哥不打烊呐~~~

用canvas显示验证码的实现 

核心代码: drawPic() 方法就是画验证码的核心方法

1 获取画布标签 使用 getElementById 原生获取 dom

2 使用 .getContext('2d') 准备画布 .textBaseline 定义画布描绘的基线

3 绘制背景

4 绘制验证码

5 绘制干扰视觉的线和点

用canvas显示验证码的实现 

drawText() 绘制验证码的方法

用canvas显示验证码的实现 

drawLine() 绘制干扰线的方法

用canvas显示验证码的实现 

drawDot() 绘制干扰点的方法

用canvas显示验证码的实现 

定义弹框弹出的方法以及删除的方法, 回归需求 ,到此这个需求就完成了 可以和后台联调,没啥问题就可提交代码啦

用canvas显示验证码的实现 

总结:

a. 遇到没有做过的需求,要去看看别人怎么做的,目前还没有难到要你自己创新,没有任何类比的代码

b. 善于使用debugger调试代码,看看自己代码那里出了问题,有bug不要慌,喝口水,去debugger打断点深入理解代码执行逻辑,效率解决

c. 作为社畜大军的一员,要自律, 要输出 ,要锻炼,有时间还要看看代码大全,地铁上撸撸MDN文档,扎实js, 期待那个你想成为的你, 共勉

到此这篇关于用canvas显示验证码的实现的文章就介绍到这了,更多相关canvas显示验证码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 #HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 #HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 #HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 #HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 #HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 #HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 #HTML / CSS
You might like
php 批量替换程序的具体实现代码
2013/10/04 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
python文件和目录操作函数小结
2014/07/11 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python学习教程之使用py2exe打包
2017/09/24 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
总经理助理的八要求
2013/11/12 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫