Html5实现手机九宫格password解锁功能
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解锁功能的更多相关文章
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- HTML5调用手机摄像机、相册功能 <input>方法
最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...
- HTML5 Canvas简简单单实现手机九宫格手势密码解锁
原文:HTML5 Canvas简简单单实现手机九宫格手势密码解锁 早上花了一个半小时写了一个基于HTML Canvas的手势解锁,主要是为了好玩,可能以后会用到. 思路:根据配置计算出九个点的位置,存 ...
- Swift 简简单单实现手机九宫格手势密码解锁
原文:Swift 简简单单实现手机九宫格手势密码解锁 大家可以看到我之前的文章［HTML5 Canvas简简单单实现手机九宫格手势密码解锁］ 本文是使用苹果语言对其进行了移植 颜色配色是拾取的支付宝的 ...
- html5调用手机摄像头，实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- 使用cordova，使html5也能像IOS，Android那样可以 调取手机的相机拍照功能
一,我们在使用html5的技术开发手机app时,并不能像IOS,Android那样可以调取手机原生的相机功能,这是我们就要借助一些插件来时实现. 二,安装Cordoba的相机插件 1.在文件目录下,使 ...
- App自动化（2）--Python&Appium实现安卓手机九宫格解锁
九宫格作为常见的手势密码,我们在使用的时候,是从起点开始,按住不放,然后滑动手指,直到最后一个点松开手指,如果与设置的手势密码匹配,则解锁成功. 现在大多数九宫格作为一个元素存在,很难定位到每一个点. ...
- iOS开发——使用技术OC篇&简单九宫格锁屏功能的实现与封装
简单九宫格锁屏功能的实现与封装 首先来看看最后的实现界面. 在这开始看下面的内容之前希望你能先大概思考活着回顾一下如果 你会怎么做,只要知道大概的思路就可以. 由于iphone5指纹解锁的实现是的这个 ...
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
随机推荐
- 关于C++中的内存泄露
1.c++内存泄漏的定义: 内存泄漏(memory leak)是指由于疏忽或错误造成了程序未能释放掉不再使用的内存的情况.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,失 ...
- ORA-16014 ORA-00312
打开alert日志发现如下错误信息 Errors in file /oracle/app/oracle/admin/hncdfhq/bdump/hncdfhq_arc0_45285882.trc: O ...
- 一个简单http请求的jmeter压测实战流程
1.新建线程组 2.创建http请求 注意:接口路径中的参数值要写变量 3.创建txt文件,存多个参数值 4.创建csv文件,在csv中上传txt文件 5.variable name填写txt中参数值 ...
- Python中可避免读写乱码的一个强慷慨法
昨天在帮同学解析一批从网络上爬取的文件时,遇到一个奇葩的问题,文件本身的编码是gbk,Eclipse编辑环境的默认编码是utf8,使用常规的open方法批量打开文件时,某些文件里存在一些不可被gbk识 ...
- Android Material风格的应用(五)--CollapsingToolbar
Collapsing Toolbar Android Material风格的应用(一)--AppBar TabLayoutAndroid Material风格的应用(二)--RecyclerViewA ...
- amazeui学习笔记--css（常用组件3）--按钮组Button-group
amazeui学习笔记--css(常用组件3)--按钮组Button-group 一.总结 1.按钮组用法:把一系列要使用的 .am-btn 按钮放入 .am-btn-group . 2.按钮工具栏: ...
- FZU Problem 2062 Suneast & Yayamao
http://acm.fzu.edu.cn/problem.php?pid=2062 题目大意: 给你一个数n,要求求出用多少个数字可以表示1~n的所有数. 思路: 分解为二进制. 对于一个数n,看它 ...
- DC针对pipeline的优化
set_optimize_register true compile -ultra 调整pipleline各级的组合逻辑,使得各级组合逻辑的延迟跟接近 对非pipeline进行优化: regi ...
- 利用朴素贝叶斯（Navie Bayes）进行垃圾邮件分类
贝叶斯公式描写叙述的是一组条件概率之间相互转化的关系. 在机器学习中.贝叶斯公式能够应用在分类问题上. 这篇文章是基于自己的学习所整理.并利用一个垃圾邮件分类的样例来加深对于理论的理解. 这里我们来解 ...
- 装饰模式和python装饰器
装饰器和装饰模式 先给出两者的定义: - 装饰器:装饰器是一个非常著名的设计模式,常常被用于有切面需求的场景.较为经典的有插入日志.性能測试.事务处理等. 装饰器是解决这类问题的绝佳设计.有了装饰器, ...