TAT.tennylv HTML5 实现屏幕手势解锁
In 作品 on 2015年07月17日 by view: 8,406
4

效果展示



实现原理 利用 HTML5 的 canvas,将解锁的圈圈划出,利用 touch 事件解锁这些圈圈,直接看代码。

canvas 里的圆圈画好之后可以进行事件绑定

接着到了最关键的步骤绘制解锁路径逻辑,通过 touchmove 事件的不断触发,调用 canvas 的 moveTo 方法和 lineTo 方法来画出折现,同时判断是否达到我们所画的圈圈里面,其中 lastPoint 保存正确的圈圈路径,restPoint 保存全部圈圈去除正确路径之后剩余的。 Update 方法:

最后就是收尾工作,把路径里面的 lastPoint 保存的数组变成密码存在 localstorage 里面,之后就用来处理解锁验证逻辑了

解锁组件

将这个 HTML5 解锁写成了一个组件,放在 https://github.com/lvming6816077/H5lock

二维码体验:

 

参考资料:http://www.nihaoshijie.com.cn/index.php/archives/537

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/07/html5-shi-xian-ping-mu-shou-shi-jie-suo/

  1. 杨小杰博客 2018 年 3 月 10 日

    我很好奇这个密码存在哪儿的

  2. 来去匆匆 2015 年 8 月 14 日

    试了一下在手机上效果,感觉要和原生的比较,流畅性还是不好,有点生硬。另外 opera 居然打开后没有显示。不知道是什么原因。

  3. HTML5实现手势屏幕解锁 – jq魔方 2015 年 7 月 22 日

    […]   转载自 AlloyTeam:http://www.alloyteam.com/2015/07 … u-shou-shi-jie-suo/ […]

发表评论