- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- 如何用Canvas把验证码画出来，具体过程是什么
如何用Canvas把验证码画出来，具体过程是什么
Admin 2022-07-12 群英技术资讯 1215 次浏览
今天这篇给大家分享的知识是“如何用Canvas把验证码画出来，具体过程是什么”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“如何用Canvas把验证码画出来，具体过程是什么”文章能帮助大家解决问题。最近做了一个小需求，就是点击删除按钮，弹出提示弹框让你输入验证码确认删除。
那么怎么显示从后台获取的验证码供用户输入呢？我在理解需求时还以为是后台直接把验证码发到用户的手机上 然后让其输入，其实不然，我理解错了，应该用 canvas 把验证码画出来。
理解需求之后我扒着有验证码的网址看，开始 canvas 画图之旅。
技术栈： quasar （基于vue的一种框架） / canvas
点击删除按钮，触发弹框弹出
弹框为什么会弹出呢？ 因为点击删除按钮，触发 handleAddDialogOpened 事件，使得data里面的 addDialogOpened 由false变成true,弹框就由之前的不显示变成显示啦。
如图代码是弹框代码：其中 canvas 标签上的 ref 是多余的，抱歉呐，忘记删掉了
data 里面定义的数据：定义 canvas 画布的宽高
verifyCode_ 绑定用户输入input框的验证码
computed 计算属性里面 mapState 映射 verifyCode 数据， mapState 是辅助函数，用于帮助我们简化生成计算属性，不懂的可以扒着 vuex 的官网瞅瞅
mapActions 也是辅助函数，用于将组件的方法映射为 store.dispatch
getVerifyCode 就是向后台获取验证的请求方法
canvasclick 方法用于 当用户辨认不清验证码，或者输入错误重新输入时，点击 换一个 即可更新验证码（此时要重新从后台获取验证码） 后台小哥哥不打烊呐~~~
核心代码： drawPic() 方法就是画验证码的核心方法
1 获取画布标签 使用 getElementById 原生获取 dom
2 使用 .getContext('2d') 准备画布 .textBaseline 定义画布描绘的基线
3 绘制背景
4 绘制验证码
5 绘制干扰视觉的线和点
drawText() 绘制验证码的方法
drawLine() 绘制干扰线的方法
drawDot() 绘制干扰点的方法
定义弹框弹出的方法以及删除的方法， 回归需求 ，到此这个需求就完成了 可以和后台联调，没啥问题就可提交代码啦
总结：
a. 遇到没有做过的需求，要去看看别人怎么做的，目前还没有难到要你自己创新，没有任何类比的代码
b. 善于使用debugger调试代码，看看自己代码那里出了问题，有bug不要慌，喝口水，去debugger打断点深入理解代码执行逻辑，效率解决
c. 作为社畜大军的一员，要自律， 要输出 ，要锻炼，有时间还要看看代码大全，地铁上撸撸MDN文档，扎实js, 期待那个你想成为的你， 共勉
“如何用Canvas把验证码画出来，具体过程是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS边距重叠有什么解决方法？
这篇文章给大家分享的是有关CSS边距重叠问题，在使用CSS排版布局时，会发现兄弟或者父子节点设置的上下外边距会发生重叠现象，那么这个重叠的问题要如何解呢？下面我们一起来了解看看。
-
HTML如何指定页面和设置页面使用字符集
这篇文章主要介绍了html 指定页面字符集的两种方法，帮助大家更好的制作网页，感兴趣的朋友可以了解下
-
CSS伪元素和伪类的使用技巧有什么，可以用于哪些场景
这篇文章主要介绍了浅谈CSS 伪元素&伪类的妙用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
css等比例分割父级容器的方法有什么？你知道几种？
css等比例分割父级容器的方法有什么？当父级容器的宽度一定，我们先要实现子元素等比例分割父级容器有很多种方法，本文给大家分享五种方法，有需要的朋友可以参考，接下来就跟随小编一起学习一下吧。
-
CSS伪类函数:is()和:where()怎样用？
CSS伪类函数:is()和:where()怎样用？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
