h5手势解锁

最新推荐文章于 2024-08-02 10:52:28 发布
最新推荐文章于 2024-08-02 10:52:28 发布
阅读量191 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： json python javascript ViewUI
原文链接：https://my.oschina.net/u/3112095/blog/1632759
本文介绍了一个基于HTML5 Canvas实现的手势解锁功能，通过绘制解锁图案进行密码设定与验证。支持自定义解锁面板大小、样式及提示信息，适用于网页端手势密码场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

h5基于canvas手势解锁

效果图

源码
(function(){
        window.H5lock = function(obj){
            this.version=function(){console.log('1.0.0')};
            this.author='chason';
            var w = document.documentElement.clientWidth || document.body.clientWidth;
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            this.height = obj.height?obj.height:h;
            this.width = obj.width?obj.width:w;
            this.bg=obj.bg?obj.bg:"#000";
            this.notice=obj.noticeEl;
            this.pswEl=obj.pswEl;
            this.type=obj.type;
            this.position=obj.position?obj.position:{left:0,top:0};
            this.savePws=obj.savePws?obj.savePws:function(psw){};
            this.lockSuccess=obj.lockSuccess?obj.lockSuccess:function(){};
            this.resetPswText=obj.resetPswText?obj.resetPswText:'重置密码';
            this.initialNoticel=obj.initialNoticel?obj.initialNoticel:'请绘制解锁图案';
            this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;
            this.devicePixelRatio = window.devicePixelRatio || 1;

            document.querySelector(this.notice).innerHTML=this.initialNoticel;
            document.querySelector(this.pswEl).innerHTML=this.resetPswText;
            (this.type=='unlock') && (document.querySelector(this.pswEl).style.display='none');
        };


        H5lock.prototype.drawCle = function(x, y) { // 初始化解锁密码面板 小圆圈
            this.ctx.strokeStyle = '#87888a';//密码的点点默认的颜色
            this.ctx.lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        H5lock.prototype.drawPoint = function(style) { // 初始化圆心
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
                this.ctx.fillStyle = style;
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2.5, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.fill();
            }
        }
        H5lock.prototype.drawStatusPoint = function(type) { // 初始化状态线条
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
                this.ctx.strokeStyle = type;
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.stroke();
            }
        }
        H5lock.prototype.drawLine = function(style, po, lastPoint) {//style:颜色 解锁轨迹
            this.ctx.beginPath();
            this.ctx.strokeStyle = style;
            this.ctx.lineWidth = 3;
            (this.lastPoint[0]) && (this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y));

            for (var i = 1 ; i < this.lastPoint.length ; i++) {
                this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
            }
            this.ctx.lineTo(po.x, po.y);
            this.ctx.stroke();
            this.ctx.closePath();

        }
        H5lock.prototype.createCircle = function() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径

            var n = this.chooseType;
            var count = 0;
            this.r = this.ctx.canvas.width / (1 + 4 * n);// 公式计算
            this.lastPoint = [];
            this.arr = [];
            this.restPoint = [];
            var r = this.r;
            for (var i = 0 ; i < n ; i++) {
                for (var j = 0 ; j < n ; j++) {
                    count++;
                    var obj = {
                        x: j * 4 * r + 2.5 * r,
                        y: i * 4 * r + 3 * r+5*r,
                        index: count
                    };
                    this.arr.push(obj);
                    this.restPoint.push(obj);
                }
            }
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
            for (var i = 0 ; i < this.arr.length ; i++) {
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }
            //return arr;
        }
        H5lock.prototype.getPosition = function(e) {// 获取touch点相对于canvas的坐标
            var rect = e.currentTarget.getBoundingClientRect();
            var po = {
                x: (e.touches[0].clientX - rect.left)*this.devicePixelRatio,
                y: (e.touches[0].clientY - rect.top)*this.devicePixelRatio
              };
            return po;
        }
        H5lock.prototype.update = function(po) {// 核心变换方法在touchmove时候调用
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

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

            this.drawPoint('#27AED5');// 每帧花轨迹
            this.drawStatusPoint('#27AED5');// 每帧花轨迹

            this.drawLine('#27AED5',po , this.lastPoint);// 每帧画圆心


            for (var i = 0 ; i < this.restPoint.length ; i++) {
                if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {
                    this.drawPoint(this.restPoint[i].x, this.restPoint[i].y);
                    this.lastPoint.push(this.restPoint[i]);
                    this.restPoint.splice(i, 1);
                    break;
                }
            }

        }
        H5lock.prototype.checkPass = function(psw1, psw2) {// 检测密码
            var p1 = '',
            p2 = '';
            for (var i = 0 ; i < psw1.length ; i++) {
                p1 += psw1[i].index + psw1[i].index;
            }
            for (var i = 0 ; i < psw2.length ; i++) {
                p2 += psw2[i].index + psw2[i].index;
            }
            return p1 === p2;
        }
        H5lock.prototype.storePass = function(psw) {// touchend结束之后对密码和状态的处理

            if (this.pswObj.step == 1) {
                if (this.checkPass(this.pswObj.fpassword, psw)) {
                    this.pswObj.step = 2;
                    this.pswObj.spassword = psw;
                    document.querySelector(this.notice).innerHTML = '密码保存成功';
                    this.drawStatusPoint('#2CFF26');
                    this.drawPoint('#2CFF26');
                    window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));
                    window.localStorage.setItem('chooseType', this.chooseType);
                    this.savePws(this.pswObj.spassword)
                } else {
                    document.querySelector(this.notice).innerHTML='两次不一致，重新输入';
                    this.drawStatusPoint('red');
                    this.drawPoint('red');
                    delete this.pswObj.step;
                }
            } else if (this.pswObj.step == 2) {
                if (this.checkPass(this.pswObj.spassword, psw)) {
                    var title = document.querySelector(this.notice);
                    title.style.color = "#2CFF26";
                    title.innerHTML = '解锁成功';

                    this.drawStatusPoint('#2CFF26');//小点点外圈高亮
                    this.drawPoint('#2CFF26');
                    this.drawLine('#2CFF26',this.lastPoint[this.lastPoint.length-1] , this.lastPoint);// 每帧画圆心
                    this.lockSuccess();

                } else if (psw.length < 4) {

                    this.drawStatusPoint('red');
                    this.drawPoint('red');
                    this.drawLine('red',this.lastPoint[this.lastPoint.length-1] , this.lastPoint);// 每帧画圆心

                    var title = document.querySelector(this.notice);
                    title.style.color = "red";
                    title.innerHTML = '请至少连接4个点';

                } else {
                    this.drawStatusPoint('red');
                    this.drawPoint('red');
                    this.drawLine('red',this.lastPoint[this.lastPoint.length-1] , this.lastPoint);// 每帧画圆心


                    var title = document.querySelector(this.notice);
                    title.style.color = "red";
                    title.innerHTML = '密码错误，您还可以输入N次';
                }
            } else {
                if(psw.length<4){
                  document.querySelector(this.notice).innerHTML = '请至少连接4个点';
                  return;
                }
                this.pswObj.step = 1;
                this.pswObj.fpassword = psw;
                document.querySelector(this.notice).innerHTML = '再次输入';
            }

        }
        H5lock.prototype.makeState = function() {
            if (this.pswObj.step == 2) {
                (this.type=='reset') && (document.querySelector(this.pswEl).style.display = 'block');

                var title = document.querySelector(this.notice);
                title.style.color = "#87888a";
                title.innerHTML = '请解锁';

            } else if (this.pswObj.step == 1) {
                (this.type=='reset') && (document.querySelector(this.pswEl).style.display = 'none');
            } else {
                (this.type=='reset') && (document.querySelector(this.pswEl).style.display = 'none');
            }
        }
        H5lock.prototype.setChooseType = function(type){
            chooseType = type;
            init();
        }
        H5lock.prototype.updatePassword = function(){
            window.localStorage.removeItem('passwordxx');
            window.localStorage.removeItem('chooseType');
            this.pswObj = {};
            document.querySelector(this.notice).innerHTML =this.initialNoticel;
            this.reset();
        }
        H5lock.prototype.initDom = function(){
            var wrap = document.createElement('div');
            wrap.setAttribute('style','position: absolute;top:0;left:0;right:0;bottom:0;');
            var canvas = document.createElement('canvas');
            canvas.setAttribute('id','canvas');
            canvas.style.cssText = 'background-color:'+this.bg+';position:absolute;top:'+this.position.top+'px;left:'+this.position.left+'px;z-index:1;';
            wrap.appendChild(canvas);

            var width = this.width;
            var height = this.height;

            document.body.appendChild(wrap);

            // 高清屏锁放
            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            canvas.height = height * this.devicePixelRatio;
            canvas.width = width * this.devicePixelRatio;


        }
        H5lock.prototype.init = function() {
            this.initDom();
            this.pswObj = window.localStorage.getItem('passwordxx') ? {
                step: 2,
                spassword: JSON.parse(window.localStorage.getItem('passwordxx'))
            } : {};
            this.lastPoint = [];
            this.makeState();
            this.touchFlag = false;
            this.canvas = document.getElementById('canvas');
            this.ctx = this.canvas.getContext('2d');
            this.createCircle();
            this.bindEvent();
            //判断是type是reset还是unlock
            if(this.type=='reset'){
               this.updatePassword();
            }
        }
        H5lock.prototype.reset = function() {
            this.makeState();
            this.createCircle();
        }
        H5lock.prototype.bindEvent = function() {
            var self = this;
            this.canvas.addEventListener("touchstart", function (e) {
                e.preventDefault();// 某些android 的 touchmove不宜触发 所以增加此行代码
                 var po = self.getPosition(e);

                 for (var i = 0 ; i < self.arr.length ; i++) {
                    if (Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r) {

                        self.touchFlag = true;
                        self.drawPoint(self.arr[i].x,self.arr[i].y);
                        self.lastPoint.push(self.arr[i]);
                        self.restPoint.splice(i,1);
                        break;
                    }
                 }
             }, false);
             this.canvas.addEventListener("touchmove", function (e) {
                if (self.touchFlag) {
                    self.update(self.getPosition(e));
                }
             }, false);
             this.canvas.addEventListener("touchend", function (e) {
                 if (self.touchFlag) {
                     self.touchFlag = false;
                     self.storePass(self.lastPoint);
                     setTimeout(function(){
                        self.reset();
                    }, 1000);
                 }


             }, false);

             document.querySelector(this.pswEl).addEventListener('click', function(){
                 self.updatePassword();
              });
        }
})();
使用方法
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <!--  -->
    <style>
        #notice{
          position: absolute;
          top:20vh;
          left:0;
          width:100%;
          z-index: 5;
          text-align: center;
        }
        #reset{
          position: absolute;
          bottom:15vh;
          right:0;
          width:100%;
          z-index: 5;
          text-align: center;
        }
    </style>
    <div id="gesture">
        <p id="notice"></p>
        <p id="reset"></p>
    </div>
</head>

<body>

</body>

<script src="../../../plugin/h5lock/H5lock.js"></script>
<script type="text/javascript">
      var opt={
          chooseType:3,//必须字段,几排几列
          width:414,//canvas宽度,默认100%
          height:736,//canvaas高度,默认100%
          //canvas位置,默认left:0,top:0,如果你的canvas宽高默认100%,此值可不填
          position:{
            left:0,
            top:0
          },
          bg:"#000",//canvas背景,默认#000
          noticeEl:"#notice",//必须字段:提示的容器,因canvas absolute定位，所以注意层叠关系
          pswEl:"#reset",//必须字段:重置密码的容器,因canvas absolute定位，所以注意层叠关系
          initialNoticel:"请绘制解锁图案",//提示解锁的文本，默认"请绘制解锁图案"
          resetPswText:"重置密码",//重置密码的文本,默认'重置密码',
          type:"reset",//必须字段,当前是设置手势还是解锁,reset和unlock
          //type='reset'的保存密码后执行,返回密码obj
          savePws:function(psw){
            alert(JSON.stringify(psw));
          },
          //解锁成功
          lockSuccess:function(){
            alert('解锁成功');
          }

      }
      var lock=new H5lock(opt);
      lock.init();
</script>

</html>

 

转载于:https://my.oschina.net/u/3112095/blog/1632759

html5手势解锁插件H5lock.js
12-17
该JS特效看该链接 http://www.jq22.com/jquery-info12139
h5手势解锁(wap)
weixin_34242658的博客
05-25 268
1.引入js文件，名称为 H5lock.js &lt;script type="text/javascript" src="./H5lock.js"&gt;&lt;/script&gt; 复制代码//H5lock.js（面向对象封装） (function(){ window.H5lock = function(obj){ this.height = obj.height; ...
h5实现手势解锁
最新发布
weixin_47683973的博客
08-02 536
【代码】h5实现手势解锁。
HTML5实现屏幕手势解锁(转载)
weixin_33958585的博客
01-08 750
来源:https://github.com/lvming6816077/H5lockhttp://threejs.org/examples/http://www.inf.usi.ch/phd/wettel/codecity-download.html (JSCity：把源码可视化成建筑物的 JS 库)http://www.alloyteam.com/2015/07/html5-shi-xian-p...
推荐开源项目：H5HandLock - 手势解锁的HTML5实现
gitblog_00084的博客
04-24 493
推荐开源项目：H5HandLock - 手势解锁的HTML5实现 项目简介 是一个基于HTML5、CSS3和JavaScript实现的轻量级手势解锁组件。该项目由宋金钟开发，旨在为Web应用提供一种与原生应用类似的用户体验，让用户通过自定义手势进行安全解锁或授权。 技术分析 HTML5 Canvas H5HandLock 使用HTML5的canvas元素作为画布，用户的手势绘制在这个画布上。can...
devin-h5手势解锁devin-h5-lock-master.zip
03-14
《devin_h5手势解锁：理解与应用》 在当今的移动互联网时代，为了提高用户交互体验和安全性，手势解锁已经成为一种流行的技术。本篇文章将深入探讨“devin-h5手势解锁”这一技术，它是基于HTML5实现的一种轻量级、...
H5手势解锁技术实现详解
资源摘要信息: "devin-h5手势解锁devin-h5-lock-master.zip" 根据所提供的文件信息，我们可以推断出以下知识点： 1. 文件类型与命名规范：文件后缀为.zip，表明这是一个压缩包文件。在IT领域，压缩包是一种常见的...
H5手势解锁组件使用指南（支持jQuery和Vue）
从提供的文件信息中，我们可以提取出关于“H5lock：H5手势解锁组件（jQuery，Vue）版本”的相关知识点。下面将详细介绍该组件的功能、用途、使用方法以及与前端开发框架的关系。 ### H5手势解锁组件（H5lock）介绍 ...
h5使用canvas画布实现手势解锁
11-30
在App开发中，为了实现自定义样式和更灵活的功能，有时需要自己动手实现手势解锁，而非依赖于现成的原生插件。本文将分享一个基础版本的实现过程，包括设置密码、解锁和密码比较。 【标签】：HTML5, Canvas, 手势, ...
android 画布锁,h5使用canvas画布实现手势解锁
weixin_42519733的博客
05-27 583
前言最近做的一个app项目使用的 apicloud 来实现跨平台开发，现在需要为这个 app 添加手势(九宫格)解锁的功能，apicloud 已经有一些第三方的原生实现的手势解锁插件，因为是原生的性能也比较好，调用也比较方便，但是都不能对它们的样式做修改，所以就打算自己来实现这个功能。这篇文章将实现过程整理分享出来，希望有需要的可以了解。分享出来的代码只实现了最基本的设置密码功能、解锁功能、比较密...
H5lockPlus基于HTML5的手势图案解锁js插件
04-14
基于开源代码优化完善而成， 支持修改图案密码、关闭/打开图案密码； 支持多账号分别存储图案密码； 可自定义最大尝试次数、尝试次数过多后等待时间、解锁完成后回调； 密码、尝试次数、剩余时间等保存在localstorage，即使刷新页面也不会清空密码和已尝试次数以及锁定剩余时间。
H5lock：H5手势解锁组件（jQuery，Vue）版本
02-27
H5锁 演示版 如何使用？ [removed][removed] var opt = { chooseType: 3, // 3 , 4 , 5, width: 300, // lock wrap width height: 300, // lock wrap height container: 'element', // the id attribute of element inputEnd: function(psw){} // when draw end param is password string } var lock = new H5lock(opt); lock.init(); 选择方法 lock.drawStatusPoint('notright')
超清晰html 手势密码
12-19
基于css3、H5+、原生js的手势密码，解决了适配到手机后模糊的问题。欢迎大家评论区讨论，如有问题，我将尽快回复。
canvas实现H5手势密码设置以及手势解锁
盼涧
12-20 1440
vue中Canvas实现H5手势密码登录
移动H5手势密码解锁插件--demo
China_Guanq的博客
08-17 2823
“”下面“”备注： 此实例应用于移动H5端，手势密码解锁的功能。实例针对不同大小的移动设备做了相应解锁屏幕的大小尺寸。 密码设置为一个 Z。需要使用手势解锁的移动前端的童鞋们，希望能帮助到。附件Demo: http://download.youkuaiyun.com/download/china_guanq/9937714
H5实现屏幕手势解锁
weixin_30586085的博客
03-16 320
http://www.nihaoshijie.com.cn/index.php/archives/537 转载于:https://www.cnblogs.com/zhangjingyun/p/5282376.html
利用JS 事件 与 Cnavas绘图 以及 H5 缓存写的一个手势解锁（一）
u010046318的博客
05-22 872
之前参加360前端实习生 星计划时，遇到一个任务，就是利用H5 localStorage实现密码的存入和获取。当时还没有学canvas 绘图，感觉利用原生JS和CSS实现比较复杂；这次刚好看了JS高程的Canvas绘图，所以正好可以理论与实践结合一下，试着做了一下这个。当然，这只是一个初期的效果，后期还会再改善。由于手势绘制密码，需要用到触摸事件的一些东西，所以我会在开头先讲一下JS的事件机制，希望
利用JS 事件 与 Cnavas绘图 以及 H5 缓存写的一个手势解锁（二）
u010046318的博客
05-23 688
上次介绍了JS的事件机制，不知道大家是否对事件都有了基本的运用和掌握。当然，这也只是我个人的一些理解。下面是我总结的一些canvas 原理并且结合手势解锁这个目的，我们能够怎么实现。canvas是H5提供的一个新元素，这个元素的功能真的很强大，一个元素结合JS就可以想绘制什么样的图形就能够出现什么样的图形，是不是也很期待怎样用canvas来实现呢？关于canvas元素本身，我想强调是：canvas
原生javascript-手势解锁
liuhao9999的博客
10-27 595
思路： 效果： <html> <head> <style> * { margin: 0px; padding: 0px; user-select: none; } canvas { cursor: pointer; width: 3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值