html5手机密码修改,HTML5 Canvas简简单单实现手机九宫格手势密码解锁
早上花了一个半小时写了一个基于HTML Canvas的手势解锁,主要是为了好玩,可能以后会用到。
思路:根据配置计算出九个点的位置,存入一个数组,当然存入数组的顺序的索引是:
第一行:0 1 2 第二行:3 4 5 第三行:6 7 8
然后就根据这个坐标数组去绘制九个点
再则我们需要一个保存选中点的数组,每当touchmove事件就判断当前触摸点和那个点的距离小于圆的半径
如果为真的话 那么就添加进入选中点的数组
在绘制过程中就根据该数据去绘制线条。就这么简单
上代码:(需要chrome浏览器或者火狐浏览器 模拟手机状态才有触摸效果)html>
name="viewport"/>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
var R = 26, CW = 400, CH = 320, OffsetX = 30, OffsetY = 30;
function CaculateNinePointLotion(diffX, diffY) {
var Re = [];
for (var row = 0; row
for (var col = 0; col
var Point = {
X: (OffsetX + col * diffX + ( col * 2 + 1) * R),
Y: (OffsetY + row * diffY + (row * 2 + 1) * R)
};
Re.push(Point);
}
}
return Re;
}
var PointLocationArr = [];
window.onload = function () {
var c = document.getElementById("myCanvas");
CW = document.body.offsetWidth;
c.width = CW;
c.height = CH;
var cxt = c.getContext("2d");
//两个圆之间的外距离 就是说两个圆心的距离去除两个半径
var X = (CW - 2 * OffsetX - R * 2 * 3) / 2;
var Y = (CH - 2 * OffsetY - R * 2 * 3) / 2;
PointLocationArr = CaculateNinePointLotion(X, Y);
InitEvent(c, cxt);
//CW=2*offsetX+R*2*3+2*X
Draw(cxt, PointLocationArr, [],null);
}
function Draw(cxt, _PointLocationArr, _LinePointArr,touchPoint) {
if (_LinePointArr.length > 0) {
cxt.beginPath();
for (var i = 0; i
var pointIndex = _LinePointArr[i];
cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
}
cxt.lineWidth = 10;
cxt.strokeStyle = "#627eed";
cxt.stroke();
cxt.closePath();
if(touchPoint!=null)
{
var lastPointIndex=_LinePointArr[_LinePointArr.length-1];
var lastPoint=_PointLocationArr[lastPointIndex];
cxt.beginPath();
cxt.moveTo(lastPoint.X,lastPoint.Y);
cxt.lineTo(touchPoint.X,touchPoint.Y);
cxt.stroke();
cxt.closePath();
}
}
for (var i = 0; i
var Point = _PointLocationArr[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(_LinePointArr.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 IsPointSelect(touches,LinePoint)
{
for (var i = 0; i
var currentPoint = PointLocationArr[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
if(LinePoint.indexOf(i)
break;
}
}
}
function InitEvent(canvasContainer, cxt) {
var LinePoint = [];
canvasContainer.addEventListener("touchstart", function (e) {
IsPointSelect(e.touches[0],LinePoint);
}, false);
canvasContainer.addEventListener("touchmove", function (e) {
e.preventDefault();
var touches = e.touches[0];
IsPointSelect(touches,LinePoint);
cxt.clearRect(0,0,CW,CH);
Draw(cxt,PointLocationArr,LinePoint,{X:touches.pageX,Y:touches.pageY});
}, false);
canvasContainer.addEventListener("touchend", function (e) {
cxt.clearRect(0,0,CW,CH);
Draw(cxt,PointLocationArr,LinePoint,null);
alert("密码结果是:"+LinePoint.join("->"));
LinePoint=[];
}, false);
}
html5手机密码修改,HTML5 Canvas简简单单实现手机九宫格手势密码解锁相关推荐
- 九宫格手势密码、指纹密码
九宫格手势密码 项目Github地址 GesturePassword项目 九宫格密码的使用一般分为两种场景: 系统级别的锁屏密码 App级别的登录.启动验证 本篇文章主要介绍的是App级别的启动验证, ...
- 自定义View----Android九宫格手势密码解锁
好久没更新blog了,最近公司比较忙,旧的项目上线时间赶.加上新的项目又来了,于是导致都好久没去鸿洋的群里扯蛋了,做了一个不称职的管理员.说了好多遍的自定义萌系进度条都没有分享出来,在这给群里的各位说 ...
- iOS 九宫格手势密码
代码地址如下: http://www.demodashi.com/demo/11490.html 一.准备工作 需要准备什么环境 xcode,iOS8+ 本例子实现什么功能 主要实现手势密码设置,验证 ...
- 解决密码中包含{},密码修改成功后, 查询分析器无法用此密码登录的问题
<iframe align="top" marginwidth="0" marginheight="0" src="http ...
- HTML5 Canvas简简单单实现手机九宫格手势密码解锁
From http://www.cnblogs.com/amylis_chen/p/4142588.html#3117954 早上花了一个半小时写了一个基于HTML Canvas的手势解锁,主要是为了 ...
- html5 audio样式修改,HTML5中 audio的样式设置
直接在样式表中设置对应的样式: audio::-webkit-media-controls-panel audio::-webkit-media-controls-mute-button audio: ...
- 手机游戏修改客户端服务器,游戏服务器 手机客户端
游戏服务器 手机客户端 内容精选 换一换 GaussDB(DWS) 提供的gsql命令行客户端,它的运行环境是Linux操作系统,在使用gsql客户端远程连接GaussDB(DWS) 集群之前,需要准 ...
- 服务器密码修改后数据库无法登录,关于 mysql5 改密码后不能登录问题的解答-数据库专栏,MySQL...
关于 mysql5 改密码后不能登录的问题 felixsun 2004-04-19 首先说明一下,下面描述仅限于win系统 其它系统我没试过, mysql 自从4.1.1以后修改了用户密码的格式, 从 ...
- 速达数据库服务器密码修改,如何创建SQL数据库登录用户及密码? 找昆明速达软件...
财务软件版1楼: 各位大师: 我现在用DELPHI做一个小型 如管理软件,数据库是Microsoft SQL SERVER,在做数据库还原时我不想用SA登录,想新建一个登录用户名和登录密码再还原数据库 ...
最新文章
- eclipse中中文字体过小
- execute、executeQuery和executeUpdate之间的区别
- HDOJ2203 亲和数
- java script 技巧
- OpenCV 色彩空间的改变
- 十一阅读攻略:和土豪做朋友,告别穷屌丝,迎接高富帅,成功逆袭!
- SAP 销售与分销模块定价完全实施手册(SAP SD Pricing Handbook)
- 一个初学者困惑的Oracle的认证问题
- 【转】Android Studio简单设置
- 腾讯云linux数据盘格式化,腾讯云服务器Centos挂载数据盘的方法
- android下升级软件介绍
- java Ofd 转图片_OFD文件怎么转换成图片格式
- 电子信息类包含计算机科学与技术么,电子信息类和计算机类有什么区别
- 分门别类刷leetcode——链表
- 电脑读取不U盘,在磁盘管理器中显示“无媒体”解决方法
- OpenMP 并行处理
- 数据库设计1-数据库设计简述
- Java log日志
- Android 路径(Path)与剪裁(Clipping)详解
- 雨季花月,回忆似金。登轼高望,志在远方。【记妙妙的OI生涯】