早上花了一个半小时写了一个基于HTML Canvas的手势解锁，主要是为了好玩，可能以后会用到。
思路：根据配置计算出九个点的位置，存入一个数组，当然存入数组的顺序的索引是：
　　　第一行：0 & 1 &2 &　　第二行：3 &4 &5 　　第三行：6 &7 &8
& & & & 然后就根据这个坐标数组去绘制九个点
& & & & 再则我们需要一个保存选中点的数组，每当touchmove事件就判断当前触摸点和那个点的距离小于圆的半径
　　 &如果为真的话 那么就添加进入选中点的数组
　　 &在绘制过程中就根据该数据去绘制线条。就这么简单&
上代码：（需要chrome浏览器或者火狐浏览器 模拟手机状态才有触摸效果）
按 Ctrl+C 复制代码
&!DOCTYPE html&
&head lang="en"&
&meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
name="viewport"/&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
&script type="text/javascript"&
var R = 26, CW = 400, CH = 320, OffsetX = 30, OffsetY = 30;
function CaculateNinePointLotion(diffX, diffY) {
var Re = [];
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)
Re.push(Point);
return Re;
var PointLocationArr = [];
window.onload = function () {
var c = document.getElementById("myCanvas");
CW = document.body.offsetW
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 & _LinePointArr. 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 & _PointLocationArr. 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 & PointLocationArr. 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 & R ) {
if(LinePoint.indexOf(i) & 0){ LinePoint.push(i);}
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);
&canvas id="myCanvas"&&/canvas&
按 Ctrl+C 复制代码
阅读(...) 评论()手机手势密码正确但解不了锁怎么办？
我的手机是三星GT-S7563,一直用同一个手势密码好长时间,突然就解不开锁了。只是偶尔能解开，大多数时候都解不了。本以为是手机容量太满的原因。但删除很多应用后还是解不了。真的很急，在线等答案，先谢谢。
已有帐号？
无法登录？
社交帐号登录研究：自定义手势解锁启用快、易记住，比文字输入密码更有效 - 推酷
研究：自定义手势解锁启用快、易记住，比文字输入密码更有效
自由形式的手势解锁已经内建于智能手机当中，作为验证使用者身份的方法之一。若您使用 Android 手机，或许常透过例如九宫格解锁这种手势操作来开启屏幕或登入帐号。美国罗格斯大学的研究指出，这类自定义的手势解锁能快速启用、容易记住，而且对于使用者来说，比起文字输入或指定图形的解锁方式更为友善。
罗格斯大学（Rutgers University）的研究团队于测试过程中，在 91 部不同的 Android 手机中安装一款应用程序，部分受测者需透过文字输入密码的解锁方式，其他人则使用自定义的手势解锁，用手指在触摸屏幕上依序画出自行设置的点位。
在实验中，像是方形、心形、三角形、星形等图形是常用的自定义手势解锁密码。即便图形设置得很复杂，手势解锁仍然比文字输入密码花费更少的时间，开启应用程序的速度感觉也较快；减少输入密码的时间，进而增加了应用程序被使用的机会，尤其在使用移动设备时，对于操作速度的感受更为明显。
记住密码对于使用者来说也是一个大问题，尤其为了帐号安全，常呼吁应对不同的帐号使用不同的密码，通常每位使用者就需要记下好几组密码。研究显示，即使分别透过手势解锁与文字输入密码来登入 6 组帐号，测试一周后同样都有 83% 的成功率，但是手势解锁容易区别不同的帐号，受测者比较不易混淆；而且在建立新密码的一小时内，手势解锁发生登入错误的次数比起文字输入密码少了 20%；此外，当登入失败时，手势解锁的受测者比起其他人更愿意尝试重新登入。
在智能手机上使用自定义的手势解锁，比起文字输入密码的方式有明显的操作优势。可惜的是，罗格斯大学的实验则未深入探究两者之间的安全性差异。那么，读者您习惯使用手势解锁，还是文字输入密码？
参考来源：
延伸阅读：
（首图来源：
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致