视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5实现手势屏幕解锁
2020-11-27 15:16:52 责编:小采
文档
点击下载本文 文档为doc格式
　　效果展示


　　实现原理
　　利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。
  1. function createCircle() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径

  3. var n = chooseType;// 画出n*n的矩阵
  4. lastPoint = [];
  5. arr = [];
  6. restPoint = [];
  7. r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关
  8. for (var i = 0 ; i < n ; i++) {
  9. for (var j = 0 ; j < n ; j++) {
  10. arr.push({
  11. x: j * 4 * r + 3 * r,
  12. y: i * 4 * r + 3 * r
  13. });
  14. restPoint.push({
  15. x: j * 4 * r + 3 * r,
  16. y: i * 4 * r + 3 * r
  17. });
  18. }
  19. }
  20. //return arr;
  21. }

　　canvas里的圆圈画好之后可以进行事件绑定
  1. function bindEvent() {
  2. can.addEventListener("touchstart", function (e) {
  3. var po = getPosition(e);
  4. console.log(po);
  5. for (var i = 0 ; i < arr.length ; i++) {
  6. if (Math.abs(po.x - arr[i].x) < r && Math.abs(po.y - arr[i].y) < r) { // 用来判断起始点是否在圈圈内部

  8. touchFlag = true;
  9. drawPoint(arr[i].x,arr[i].y);
  10. lastPoint.push(arr[i]);
  11. restPoint.splice(i,1);
  12. break;
  13. }
  14. }
  15. }, false);
  16. can.addEventListener("touchmove", function (e) {
  17. if (touchFlag) {
  18. update(getPosition(e));
  19. }
  20. }, false);
  21. can.addEventListener("touchend", function (e) {
  22. if (touchFlag) {
  23. touchFlag = false;
  24. storePass(lastPoint);
  25. setTimeout(function(){

  27. init();
  28. }, 300);
  29. }


  32. }, false);
  33. }

　　接着到了最关键的步骤绘制解锁路径逻辑，通过touchmove事件的不断触发，调用canvas的moveTo方法和lineTo方法来画出折现，同时判断是否达到我们所画的圈圈里面，其中lastPoint保存正确的圈圈路径，restPoint保存全部圈圈去除正确路径之后剩余的。 Update方法：
  1. function update(po) {// 核心变换方法在touchmove时候调用
  2. ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  4. for (var i = 0 ; i < arr.length ; i++) { // 每帧先把面板画出来
  5. drawCle(arr[i].x, arr[i].y);
  6. }

  8. drawPoint(lastPoint);// 每帧花轨迹
  9. drawLine(po , lastPoint);// 每帧画圆心

  11. for (var i = 0 ; i < restPoint.length ; i++) {
  12. if (Math.abs(po.x - restPoint[i].x) < r && Math.abs(po.y - restPoint[i].y) < r) {
  13. drawPoint(restPoint[i].x, restPoint[i].y);
  14. lastPoint.push(restPoint[i]);
  15. restPoint.splice(i, 1);
  16. break;
  17. }
  18. }

  20. }

　　最后就是收尾工作，把路径里面的lastPoint保存的数组变成密码存在localstorage里面，之后就用来处理解锁验证逻辑了。
  1. function storePass(psw) {// touchend结束之后对密码和状态的处理
  2. if (pswObj.step == 1) {
  3. if (checkPass(pswObj.fpassword, psw)) {
  4. pswObj.step = 2;
  5. pswObj.spassword = psw;
  6. document.getElementById('title').innerHTML = '密码保存成功';
  7. drawStatusPoint('#2CFF26');
  8. window.localStorage.setItem('passwordx', JSON.stringify(pswObj.spassword));
  9. window.localStorage.setItem('chooseType', chooseType);
  10. } else {
  11. document.getElementById('title').innerHTML = '两次不一致，重新输入';
  12. drawStatusPoint('red');
  13. delete pswObj.step;
  14. }
  15. } else if (pswObj.step == 2) {
  16. if (checkPass(pswObj.spassword, psw)) {
  17. document.getElementById('title').innerHTML = '解锁成功';
  18. drawStatusPoint('#2CFF26');
  19. } else {
  20. drawStatusPoint('red');
  21. document.getElementById('title').innerHTML = '解锁失败';
  22. }
  23. } else {
  24. pswObj.step = 1;
  25. pswObj.fpassword = psw;
  26. document.getElementById('title').innerHTML = '再次输入';
  27. }

  29. }

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

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

下载本文
显示全文
专题
懂视 51dongshi.net 版权所有
Copyright © 2019-2025