Demo - canvas实现设置、验证九宫格手势密码

AlienZHOU 发布于2019-08-20 15:25 / 3188人阅读

摘要：若匹配，则存入或验证密码从或获取到密码，判断是否匹配未获取到密码，输出提示若中途变更单选按钮，重置临时存储的绘制密码及判断是否首次输入的状态，防止误操作可能出现的

报了360前端实习生的岗，除了测评、考试外还要做个大作业 25号考的技术综合的选择题简直让我开始怀疑人生哇 ╥﹏╥ 然后大作业我拿到的题目就是介个，实现手势密码的输入以及验证

Demo演示地址

github传送门

思路

graph TD
    A[根据原型图拆分布局]
    A --> | top-bar | B[顶部标题]
    A --> | canvas | C[手势绘制区域]
    A --> | Msg | D[提示信息]
    A --> | radio-group | E[单选按钮组]

顶部标题

在viewport完美视口下，固定div高度，宽度100%，文字居中则能完成适配~

手势绘制区域

这里让绘制区域宽度去自适应，控制变量法嘛~

设置默认属性。包括图形区域与屏幕的边距、圆半径、canvas高度（offsetX、offsetY、R、CanvasHeight）

动态获取窗口可见宽度作为canvas宽度，计算圆的间隔距离

根据上述参数计算九个点的原点位置

绘制九个圆点

绑定touch三个事件并响应。绘制密码记录在LinePoint数组里

touchstart 时判断当前触摸点和圆点的距离是否小于圆的半径，如果为真则记录当前圆点

touchmove 同样判断触摸点与圆点距离，并在绘制过程中根据记录数据绘制线条

touchend 判断绘制密码是否符合规范，并根据单选框状态做出相应事件相应

提示信息

不同状态下提示用户操作

单选按钮组

未选择任一按钮时，提示用户选择

设置密码

首次输入时，记录首次绘制密码

二次输入时，判断是否匹配首次绘制密码。若匹配，则存入localStorage或Cookie

验证密码

从localStorage或Cookie获取到密码，判断是否匹配

未获取到密码，输出提示

若中途变更单选按钮，重置临时存储的绘制密码及判断是否首次输入的状态，防止误操作可能出现的bug~

云服务器 GPU云服务器 html设置九宫格九宫格九宫格图九宫格源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82230.html

用 canvas 实现 Web 手势解锁

摘要：画线画线需要借助来完成，也就是，当我们的时候，传入开始时的相对坐标，作为线的一端，当我们的时候，获得坐标，作为线的另一端，当我们的时候，开始画线。有两个函数，获得当前的相对坐标获得触摸点的相对位置相对坐标画线画线然后就是监听的和事件了。最近参加 360 暑假的前端星计划，有一个在线作业，截止日期是 3 月 30 号，让手动实现一个 H5 手势解锁，具体的效果就像原生手机的九宫格解锁那...

MycLambert 2019-08-20 15:31 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

codercao 2019-08-19 18:10 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

huayeluoliuhen 2019-08-01 15:13 评论0 收藏0
基于Vue实现拖拽升级（九宫格拖拽）

摘要：前言在本文中将会用完成九宫格拖拽效果，同时介绍一下网格布局。到这里我们就把基于的九宫格拖拽实现了，有问题或者发现错误的请指正，谢谢大家珍惜淡定的心境，苦过后更加清前言在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入传送门：Demo以及完整代码连接效果实例 showImg(https://segmentfault.com/im...

RyanQ 2019-08-29 15:13 评论0 收藏0