HTML5 Canvas简简单单实现手机九宫格手势密码解锁
2023-09-14 08:58:57 时间
早上花了一个半小时写了一个基于HTML Canvas的手势解锁,主要是为了好玩,可能以后会用到。
思路:根据配置计算出九个点的位置,存入一个数组,当然存入数组的顺序的索引是:
第一行:0 1 2 第二行:3 4 5 第三行:6 7 8
然后就根据这个坐标数组去绘制九个点
再则我们需要一个保存选中点的数组,每当touchmove事件就判断当前触摸点和那个点的距离小于圆的半径
如果为真的话 那么就添加进入选中点的数组
在绘制过程中就根据该数据去绘制线条。就这么简单
上代码:(需要chrome浏览器或者火狐浏览器 模拟手机状态才有触摸效果)
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
相关文章
- centos7忘记root密码解决办法
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- Linux 环境下 MySQL 5.7 root密码忘记-解决方法
- js实现密码强度验证详解编程语言
- html5对密码加密详解编程语言
- 更改阿里云MySQL密码更改:简单又安全(阿里云mysql密码)
- 揭秘Redis默认密码的真相(redis默认的密码)
- 如何设置MySQL用户名和密码(设置mysql用户名密码)
- Linux Git绝密:让你的密码安全无忧(linuxgit密码)
- 密码Redis默认登录:设置用户名密码(redis默认用户名)
- 利用HTML5和MySQL实现数据交换(html5连接mysql)
- 集结 HTML5 与 MySQL,搭建无可抵挡的猛力!(html5与mysql)
- 强度Oracle管理员:建立更强密码防止安全漏洞(oracle管理员的密码)
- 实现Linux无需密码登录的方法(Linux免密登录)
- 优秀的Linux密码管理技巧:保障账户安全的必修课(linux密码管理)
- 如何在Oracle中修改用户密码(oracle修改用户密码)
- Linux系统教程:挽救模式破解root密码
- SQL Server解开密码的路(sqlserver 解密)
- Oracle TP:密码解决方案及优化建议(oracletp)
- HTML5与Oracle结合,展现出更多可能(html5 oracle)
- 使用Redis前,设定地址及安全密码(redis设定地址密码)