从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍了如何使用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显示验证码”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图