前些天，把我的手機升級到了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