用canvas显示验证码的实现

站长资源 2024/12/29 佚名

2 0 1

最近做了一个小需求，就是点击删除按钮，弹出提示弹框让你输入验证码确认删除。

那么怎么显示从后台获取的验证码供用户输入呢？我在理解需求时还以为是后台直接把验证码发到用户的手机上然后让其输入，其实不然，我理解错了，应该用 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,验证码

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“用canvas显示验证码的实现”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

用canvas显示验证码的实现

canvas 基础之图像处理的使用

HTML5给汉字加拼音收起展开组件的实现代码

评论“用canvas显示验证码的实现”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接