隨著技術的更新，很多人都會頭疼，又是手勢密碼，又是人臉識別= =。。。學海無涯苦作舟啊……手勢密碼，顧名思義，需要的是canvas的技術，在這裡，我把需要用到的js已經上傳到資源裡面：http://download.csdn.net/detail/zhaohaixin0418/9738860，下載，引入頁面。然後在頁面寫如下即可：（可根據專案需求去改js程式碼，正確的密碼是一個字母“Z”）

<div id="gesturepwd"></div>
<script src="../js/jquery-2.2.3.min.js"></script>
<script 
 
src="../js/jquery.gesture.password.js"></script>
<script>
$("#gesturepwd").GesturePasswd({
backgroundColor:"#252736",  //背景色
color:"#FFFFFF",   //主要的控制元件顏色
roundRadii:50,    //大圓點的半徑
pointRadii:20, //大圓點被選中時顯示的圓心的半徑
space:30,  //大圓點之間的間隙
width:400,   //整個元件的寬度
height:400,  //整個元件的高度
lineColor:"#00aec7",   //使用者劃出線條的顏色
 
zindex :100  //整個元件的css z-index屬性
});
$("#gesturepwd").on("hasPasswd",function(e,passwd){//passed為使用者所輸入的密碼，進行處理，加密後交給後端驗證等。。。
var result;
if(passwd == "1235789"){
result=true;
        }
else {
result=false;
        }
if(result == true){
$("#gesturepwd").trigger("passwdRight");
setTimeout(function(){
//密碼驗證正確後的其他操作
 
alert("密碼正確!")
            },500);  //延遲半秒以照顧視覺效果
}
else{
$("#gesturepwd").trigger("passwdWrong");
//密碼驗證錯誤後的其他操作。。。
}
    });
</script>