用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 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 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中显示格式化的用户输入
2006/10/09 PHP
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
php中关于换行的实例写法
2019/09/26 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
财务会计专业毕业生自荐信
2013/10/19 职场文书
护理学中专毕业生求职信
2013/11/11 职场文书
自我鉴定写作要点
2014/01/17 职场文书
工作过失检讨书
2014/02/23 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
商业门面租房协议书
2014/11/25 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
董事长致辞
2015/07/29 职场文书
学校教学管理制度
2015/08/06 职场文书
八年级数学教学反思
2016/02/17 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python