HTML5真的是非常强大，前端时间看到一个canvas实现九宫格的password解锁。

今天抽空模仿了一个，特定分享一下。

效果截图例如以下：

效果看起来还不错吧！

源代码例如以下： 

<!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();

                }

            }

        }

        /**

         * 计算选中的password

         */

        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("password结果是："+pwdArr.join("->"));

                pwdArr=[];

            }, false);

        }

    </script>

</head>

<body>

<canvas id="lockCanvas"></canvas>

</body>

</html>

好了下班了。就写这么多了！

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

Html5实现手机九宫格password解锁功能的更多相关文章

  1. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  2. HTML5调用手机摄像机、相册功能 <input>方法

    最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...

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

    原文:HTML5 Canvas简简单单实现手机九宫格手势密码解锁 早上花了一个半小时写了一个基于HTML Canvas的手势解锁,主要是为了好玩,可能以后会用到. 思路:根据配置计算出九个点的位置,存 ...

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

    原文:Swift 简简单单实现手机九宫格手势密码解锁 大家可以看到我之前的文章［HTML5 Canvas简简单单实现手机九宫格手势密码解锁］ 本文是使用苹果语言对其进行了移植 颜色配色是拾取的支付宝的 ...

  5. html5调用手机摄像头，实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  6. 使用cordova，使html5也能像IOS，Android那样可以 调取手机的相机拍照功能

    一,我们在使用html5的技术开发手机app时,并不能像IOS,Android那样可以调取手机原生的相机功能,这是我们就要借助一些插件来时实现. 二,安装Cordoba的相机插件 1.在文件目录下,使 ...

  7. App自动化（2）--Python&Appium实现安卓手机九宫格解锁

    九宫格作为常见的手势密码,我们在使用的时候,是从起点开始,按住不放,然后滑动手指,直到最后一个点松开手指,如果与设置的手势密码匹配,则解锁成功. 现在大多数九宫格作为一个元素存在,很难定位到每一个点. ...

  8. iOS开发——使用技术OC篇&简单九宫格锁屏功能的实现与封装

    简单九宫格锁屏功能的实现与封装 首先来看看最后的实现界面. 在这开始看下面的内容之前希望你能先大概思考活着回顾一下如果 你会怎么做,只要知道大概的思路就可以. 由于iphone5指纹解锁的实现是的这个 ...

  9. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

随机推荐

  1. 1.2 Use Cases中 Stream Processing官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Stream Processing 流处理 Many users of Kafka ...

  2. spark算子（二）

    1.collect算子 *使用foreachACTION操作 ,collect在远程集群中遍历RDD的元素 *使用collect操作,将分布式在远程集群中的数据拉取到本地 *这种方式不建议使用,如果数 ...

  3. Altium Designer中原理图和pcb交叉查找

    转自:https://wenku.baidu.com/view/53ca06badbef5ef7ba0d4a7302768e9951e76e33.html 再看看:::: 转自:http://blog ...

  4. 2013腾讯编程马拉松||HDU 4505 小Q系列故事——电梯里的爱情 水水水

    http://acm.hdu.edu.cn/showproblem.php?pid=4505 题目大意: 电梯最开始在0层,并且最后必须再回到0层才算一趟任务结束.假设在开始的时候已知电梯内的每个人要 ...

  5. 安装配置Rancher管理docker

    原文:安装配置Rancher管理docker 版权声明:本文为博主原创文章,转载请注明地址http://blog.csdn.net/tianyaleixiaowu. https://blog.csdn ...

  6. (6)uboot具体解释——关闭缓存和mmu

    uboot具体解释--关闭缓存和mmu 当设置完时钟分频以后,uboot就会运行cpu_init_crit汇编函数,这个函数的主要作用就是关闭缓存和mmu.然后调用lowlevel_init函数进行系 ...

  7. x264代码剖析（十五）：核心算法之宏块编码中的变换编码

    x264代码剖析(十五):核心算法之宏块编码中的变换编码 为了进一步节省图像的传输码率.须要对图像进行压缩,通常採用变换编码及量化来消除图像中的相关性以降低图像编码的动态范围.本文主要介绍变换编码的相 ...

  8. [HTML] Change an HTML5 input's placeholder color with CSS

    We will look at what CSS selectors to use to change an HTML5 inputs placeholder color. This can diff ...

  9. 【3005】拦截导弹问题（noip1999）

    Time Limit: 3 second Memory Limit: 2 MB 某国为了防御帝国的导弹袭击,开发出一种导弹拦截系统,但是这种拦截系统有一个缺陷:虽然他的第一发炮弹能达到任意的高度,但是 ...

  10. PatentTips - Data Plane Packet Processing Tool Chain

    BACKGROUND The present disclosure relates generally to systems and methods for providing a data plan ...