2015第54篇:HTML5实现屏幕手势解锁

今天发现了一个h5写的锁屏效果,看着还不错,可以体验一下.日志显示效果不是很好,可以去github上代码挡下来看看。

效果展示

 

 

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

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

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

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

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

二维码体验:

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址