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

效果展示



实现原理 利用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. 来去匆匆 2015 年 8 月 14 日

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

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

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

发表评论