Html5实现手机九宫格密码解锁功能

原创 2015年12月10日 17:31:51

HTML5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,特定分享一下!

效果截图如下:


效果看起来还不错吧!

源码如下:

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta charset="UTF-8">
    <title>html5实现网页解锁功能</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
    	/**
    	 * 半径,画布宽度,画布高度,画布x内边距,画布y内边距
    	 */
        var R = 26, canvasWidth = 400, canvasHeight = 320, OffsetX = 30, OffsetY = 30;
    	var circleArr = [];
        function createCirclePoint(diffX, diffY) {
            for (var row = 0; row < 3; row++) {
                for (var col = 0; col < 3; col++) {
                	// 计算圆心坐标
                    var Point = {
                        X: (OffsetX + col * diffX + ( col * 2 + 1) * R),
                        Y: (OffsetY + row * diffY + (row * 2 + 1) * R)
                    };
                    circleArr.push(Point);
                }
            }
        }
        window.onload = function () {
            var canvas = document.getElementById("lockCanvas");
            canvasWidth = document.body.offsetWidth;//网页可见区域宽
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            var cxt = canvas.getContext("2d");
            /**
             * 每行3个圆
             * OffsetX为canvas x方向内边距
             * */
            var X = (canvasWidth - 2 * OffsetX - R * 2 * 3) / 2;
            var Y = (canvasHeight - 2 * OffsetY - R * 2 * 3) / 2;
            
            createCirclePoint(X, Y);
            
            bindEvent(canvas, cxt);
            //CW=2*offsetX+R*2*3+2*X
            Draw(cxt, circleArr, [],null);
        }
        function Draw(cxt, circleArr, pwdArr,touchPoint) {
            if (pwdArr.length > 0) {
                cxt.beginPath();
                for (var i = 0; i < pwdArr.length; i++) {
                    var pointIndex = pwdArr[i];
                    cxt.lineTo(circleArr[pointIndex].X, circleArr[pointIndex].Y);
                }
                cxt.lineWidth = 10;
                cxt.strokeStyle = "#627eed";
                cxt.stroke();
                cxt.closePath();
                if(touchPoint!=null){
                    var lastPointIndex=pwdArr[pwdArr.length-1];
                    var lastPoint=circleArr[lastPointIndex];
                    cxt.beginPath();
                    cxt.moveTo(lastPoint.X,lastPoint.Y);
                    cxt.lineTo(touchPoint.X,touchPoint.Y);
                    cxt.stroke();
                    cxt.closePath();
                }
            }
            for (var i = 0; i < circleArr.length; i++) {
                var Point = circleArr[i];
                cxt.fillStyle = "#627eed";
                cxt.beginPath();
                cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
                cxt.fillStyle = "#ffffff";
                cxt.beginPath();
                cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
                if(pwdArr.indexOf(i)>=0){
                    cxt.fillStyle = "#627eed";
                    cxt.beginPath();
                    cxt.arc(Point.X, Point.Y, R -16, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                }

            }
        }
        
        /**
         * 计算选中的密码 
         */
        function getSelectPwd(touches,pwdArr){
            for (var i = 0; i < circleArr.length; i++) {
                var currentPoint = circleArr[i];
                var xdiff = Math.abs(currentPoint.X - touches.pageX);
                var ydiff = Math.abs(currentPoint.Y - touches.pageY);
                var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
                if(dir > R || pwdArr.indexOf(i) >= 0)
                	continue;
                 pwdArr.push(i);
                 break;
            }
        }
        
        /**
         * 给画布绑定事件
         */
        function bindEvent(canvas, cxt) {
            var pwdArr = [];
            canvas.addEventListener("touchstart", function (e) {
                getSelectPwd(e.touches[0],pwdArr);
            }, false);
            canvas.addEventListener("touchmove", function (e) {
                e.preventDefault();
                var touches = e.touches[0];
                getSelectPwd(touches,pwdArr);
                cxt.clearRect(0,0,canvasWidth,canvasHeight);
                Draw(cxt,circleArr,pwdArr,{X:touches.pageX,Y:touches.pageY});
            }, false);
            canvas.addEventListener("touchend", function (e) {
                cxt.clearRect(0,0,canvasWidth,canvasHeight);
                Draw(cxt,circleArr,pwdArr,null);
                alert("密码结果是:"+pwdArr.join("->"));
                pwdArr=[];
            }, false);
        }
    </script>
</head>
<body>
<canvas id="lockCanvas"></canvas>
</body>
</html>
好了下班了,就写这么多了!

欢迎大家关注我的博客,如有疑问,请加qq群:454796847、135430763 共同进步!

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Html5响应式设计实现九宫格

自从响应式设计的理念提出以来,越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如:小米商城,天猫等。 至于响应式设计的概念等大家可以去百度百度,我这里就不相信讲解了。直接为大家带来...

div+css实现九宫格效果

div+css实现九宫格效果 有3种方法: 1、方法一:把九宫图切割成9张图,用9个div合在一起,改变宽高,实现。优点:兼容性100%支持,缺点div太多,使用不方便。 2、方法二:把九...
  • linguifa
  • linguifa
  • 2015年02月11日 11:07
  • 10157

Git.oschina解释创建SSH密钥

工作流程   安装设置git 下载最新版本的git http://git-scm.com/downloads 当你安装完成git的时候,你需要简单的配置一下,打开终端: 用户名 第一步,...

仿支付宝滑块验证码效果的前端实现

支付宝的滑块验证效果,又刷新了大家对于验证码的认知,这种滑块效果,也确实能使用户体验更加顺畅。除了它外观和用户体验上的优秀外,其实他的安全性也并未降低,后端对用户行为的分析依然保证了安全校验。 下面...

利用ActivityLifecycleCallBack监控app前后台状态切换,实现手势密码即九宫格解锁

最近由于项目需求,需要在应用中加入手势密码这个功能,具体需求是这样的:首次启动应用会和后台校验手势密码,当切换到后台超过5分钟后,应用再次进入前台需要判断进入手势解锁界面; 当看到这个需求的时候,我首...

HTML5实现手机屏幕解锁功能

HTML5实现手机屏幕解锁功能 代码如下             html5实现网页解锁功能             html, body {   ...
  • sufei58
  • sufei58
  • 2015年12月16日 13:07
  • 290

自定义View----Android九宫格手势密码解锁

由于公司新的项目需要用到九宫格手势密码解锁的功能,于是觉得自己写一个。废话不多说,直接上效果图:  首选我们来分析下实现的思路:  1. 绘制出相对于这个View的居中的九个点,作为默认状...

手机的九宫格图案解锁总共能绘出多少种图案?(hiho模拟面试题2 - google在线技术笔试模拟)

滑动解锁是智能手机一项常用的功能。你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点。这些划过的点所组成的有向折线,如果与预设的折线在图案、方向上都一致,那么手机将解锁。两...

九宫格手机解锁有多少种情况?

0、写在前面:本文的内容大概搬运自果壳和知乎的两篇文章,在结尾有注明参考。安卓手势解锁是安卓手机解除锁定的密码方案,究竟这种方式一定有多少种可能呢?这是本文要讨论的问题。1、问题定义问题很简单:安卓的...
  • xia7139
  • xia7139
  • 2016年07月02日 00:12
  • 413
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html5实现手机九宫格密码解锁功能
举报原因:
原因补充:

(最多只允许输入30个字)