HTML5实现屏幕手势解锁_编程语言论坛_课课家技术论坛

首页视频课程模拟题库新闻中心 IT文库读书招聘博客论坛

我的课课家

软考 photoshop oracle PHP hcnp Maya java

名课折扣免费课程套餐学习线路图

专题课程

老男孩Linux系统设计软件教程计算机考证

公众号/APP端

扫码关注课课家微信号，访问移动端

关注微信公众号，可下载APP应用。

帮助中心创建学院

下载安卓APP

给我发消息

客服QQ：3315713922

论坛 >编程语言 >HTML5实现屏幕手势解锁

HTML5实现屏幕手势解锁

课课家iOS游客发布于 2017-12-06 10:08查看:1259回复:1

效果展示

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

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

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

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

查看评分情况

全部评分

此主贴暂时没有点赞评分

总计：赞0次

版主推荐

上一篇：自定义标签在IE6-8的困境
下一篇：python 线程之 Condition

精品在线课程【一线专家讲授+24小时内答疑+永久免费观看+市场1/10价格】

共有1条评论

希尔瓦娜斯
楼主说的实在精彩
2017-12-07 09:10赞 (0)回复沙发

本论坛发帖,请先登录

版主招版主啦

IT宅男
mr jack
Mr ken
Mright
cappuccino
YUI
课课家运营团队
课课家技术团队1
酸酸~甜甜

课程推荐

Java Web 高级技术视频课程

Java Web 高级技术视频课程: 24904人学习

Java设计模式之单例模式视频课程

Java设计模式之单例模式视频课程: 10200人学习

JAVA学习之SSH整合实战训练视频教程

JAVA学习之SSH整合实战训练视频教程: 12520人学习

网页制作HTML视频教程_动力节点

网页制作HTML视频教程_动力节点: 11026人学习

楼主关注

热门贴子

1
简历中千万别再写“熟练操作office办公软件”
回复:6查看:28798被赞:0
2
信息系统项目管理师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:26866被赞:0
3
3DMAX打开文件时显示缺少dll解决方案
回复:25查看:15682被赞:0
4
3DMAX渲染大图Vray3.0中文版参数设置
回复:6查看:15016被赞:2
5
系统规划与管理师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:14621被赞:0
6
网络规划设计师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:13337被赞:0
7
PS的各种颜色参数，需要的请收藏
回复:3查看:13118被赞:0
8
网络工程师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:12009被赞:0
9
系统集成项目管理师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:11998被赞:0

1
PHP与MySQL通讯那点事（1）
回复:1查看:3578被赞:0
2
JavaScript 深入之词法作用域和动态作用域
回复:1查看:3530被赞:0
3
SQL -- 字符串的长度，是字符数量，还是字节数量？
回复:1查看:3385被赞:0
4
用Python的 __slots__ 节省9G内存
回复:1查看:3353被赞:0
5
File杂谈——初识file控件
回复:1查看:3263被赞:0
6
浅谈 Node.js 单线程模型
回复:1查看:3211被赞:0
7
Python 中 eval 带来的潜在风险
回复:1查看:2964被赞:0
8
Python中的str与unicode处理方法
回复:1查看:2911被赞:0
9
窥探Swift之数组
回复:1查看:2796被赞:0

发布新贴

选择版块:
标题:
内容
验证码:

编辑帖子

标题:
内容
<p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">        效果展示</strong></p><p style="text-align: center;"><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171206/1512525982379552.gif" alt="1512525982379552.gif"/></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">        <strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">实现原理</strong><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"> 利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。</span></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171206/1512526016698579.png" title="1512526016698579.png" alt="image.png"/></span></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">        canvas里的圆圈画好之后可以进行事件绑定</span></span></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171206/1512526040519778.png" title="1512526040519778.png" alt="image.png"/></span></span></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">        <span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">接着到了最关键的步骤绘制解锁路径逻辑，通过touchmove事件的不断触发，调用canvas的moveTo方法和lineTo方法来画出折现，同时判断是否达到我们所画的圈圈里面，其中lastPoint保存正确的圈圈路径，restPoint保存全部圈圈去除正确路径之后剩余的。 Update方法：</span></span></span></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171206/1512526057459912.png" title="1512526057459912.png" alt="image.png"/></span></span></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">        <span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">最后就是收尾工作，把路径里面的lastPoint保存的数组变成密码存在localstorage里面，之后就用来处理解锁验证逻辑了</span></span></span></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171206/1512526078892803.png" title="1512526078892803.png" alt="image.png"/></span></span></strong></p>
选择版块: