用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中的calc函数浅析
Jul 10 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 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动态生成虚拟现实VRML网页
2006/10/09 PHP
MySQL数据源表结构图示
2008/06/05 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
js实现轮播图特效
2020/05/28 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python itertools模块详解
2015/05/09 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python生成随机密码的方法
2017/06/16 Python
python正则实现提取电话功能
2018/02/24 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
python中如何使用虚拟环境
2020/10/14 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
临时用工协议书范本
2014/10/29 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL