用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 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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 simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
js+html制作简单验证码
2017/02/16 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python 文件读写操作实例详解
2014/03/12 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
python中的编码知识整理汇总
2016/01/26 Python
python3.7.0的安装步骤
2018/08/27 Python
详解django自定义中间件处理
2018/11/21 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
上海微创软件面试题
2012/06/14 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
公司授权委托书范文
2014/08/02 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android