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

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 共同进步!

时间: 2024-11-05 06:27:24

Html5实现手机九宫格密码解锁功能的相关文章

html5 实现手机摇一摇功能(C)

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>简易模拟微信摇一摇</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-

html5 实现手机摇一摇功能(B)

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>摇晃判断</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scala

html5 实现手机摇一摇功能(A)

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>获取设备信息</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-sca

HTML5 Canvas简简单单实现手机九宫格手势密码解锁

原文:HTML5 Canvas简简单单实现手机九宫格手势密码解锁 早上花了一个半小时写了一个基于HTML Canvas的手势解锁,主要是为了好玩,可能以后会用到. 思路:根据配置计算出九个点的位置,存入一个数组,当然存入数组的顺序的索引是: 第一行:0   1  2   第二行:3  4  5 第三行:6  7  8 然后就根据这个坐标数组去绘制九个点 再则我们需要一个保存选中点的数组,每当touchmove事件就判断当前触摸点和那个点的距离小于圆的半径  如果为真的话 那么就添加进入选中点的数

[优化]Swift 简简单单实现手机九宫格手势密码 解锁

我去 为毛这篇文章会被移除首页 技术含量还是有点的   如果在此被移除  那就果断离开园子了 之前的文章 Swift 简简单单实现手机九宫格手势密码解锁 1.对之前的绘制线条的方法进行优化 之前是遍历选中点的集合分别的在点之间绘制线条 改进之后使用系统的API一口气将线条绘制出来 2.增加密码错误情况下想某宝一样红色提示和三角形状的路线指示如下图所示 3.遇到的难点主要是三角形的绘制 和 旋转角度的功能 原理就不多说了 真相见代码 转载需要注明出处 http://www.cnblogs.com/

Swift 简简单单实现手机九宫格手势密码解锁

大家可以看到我之前的文章[HTML5 Canvas简简单单实现手机九宫格手势密码解锁] 本文是使用苹果语言对其进行了移植 颜色配色是拾取的支付宝的颜色 本文的目的说明:语言是想通的  只要思路在 语言只是手段而已 这是本人自学swift一个礼拜 然后花了三个小时写出来的肯定会有不规范的地方 因为思路比较简单 大家可以参考 javascript 版本 废话不多说先上效果 (对了 大家如果能在转载的地方注明出处的话 那就是极好的 http://www.cnblogs.com/zzzzz/p/swif

html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能详解

在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用html5来实现他们.简单的让你大开眼界. HTML5 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这...有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮助你提高开发效率的同时,还带来了更炫的功能.好了,我们今天就来做一做看看效果吧!! 看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitio

利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javascript: [javascript] view plaincopy var SHAKE_THRESHOLD = 3000; var last_update = 0;

HTML5实现手机摇一摇的功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. js如下: <scirpt> var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y =