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,貌似有点过于复杂了,怕是自己划出的图形都会很难记住,那样就得不偿失啦。

底图:

JS 手势图形解锁

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

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

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

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

效果预览:

JS 手势图形解锁

点击确定后,返回的口令原文:

JS 手势图形解锁

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

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


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

你可能感兴趣的:(js)