用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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 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判断邮箱地址是否存在的方法
2016/02/13 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
js日期相关函数总结分享
2013/10/15 Javascript
简单的js表单验证函数
2013/10/28 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
使用django实现一个代码发布系统
2019/07/18 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python自带的IDE在哪里
2020/07/01 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
升国旗演讲稿
2014/09/05 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
红与黑读书笔记
2015/06/29 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js