JS 手势图形解锁

前些天，把我的手机升级到了Android 4.0版本，无意中发现多了一种屏幕解锁方式：图形口令

就是在屏幕上有9个圆点，按3*3的矩阵排列，以这9个圆点为节点，可以随意划出一个几何形状，记下这个几何形状的划动路径，下次为屏幕解锁时按照记忆将这个形状划动出来，就算是解锁成功啦！

体验之后，感觉不错，有一定的可玩性，呵呵

更重要的是，大脑对于记忆一张图形，相比于一串枯燥的字符，还是更有优势的，这对于避免将口令遗忘应该有些帮助

随即就想在WEB上也实现这种图形口令，让WEB的密码输入多一种选择也算是一件好事吧

真正做起来，还算是简单的

首先用PS画了一张底图，上面有16个圆点，按4*4的矩阵排列，至于为什么要用4*4，主要是3*3的矩阵感觉有点小，组合也比较简单。4*4的话，安全性相对要更高些，另外，16个节点，正好可以使用16进制的0~9和A~F来表示。再大的话，比如5*5，貌似有点过于复杂了，怕是自己划出的图形都会很难记住，那样就得不偿失啦。

底图：

哈哈，还不错吧，自我感觉很是唯美   :)

 

底图做好之后，开始写脚本

在WEB上画线，并非头一次，考虑到对IE、FF、Opera的兼容性，首先将VML、PNG等方式Pass掉，至于SVG，对于老版本的IE支持也不太友好，还是放弃了，Flash倒是好选择，不过嫌麻烦，最后还是决定使用最原生态的办法：JS+DIV

经过3个多小时的敲敲打打，很是新鲜的WEB版图形口令就算大功告成啦！

效果预览：

 

点击确定后，返回的口令原文：

 

在划线时，又增加了预览的效果，感觉好多了。

WEB版的图形口令就算搞定了，至于如何嵌入到项目里使用，就很简单了，这里不再敖述。

附件下载地址：http://files.cnblogs.com/netWild/图形口令（DrawPass）.zip