在网页中实现：手势解锁密码

手机的手势解锁，是很好用的功能。方便，而且比输入密码更安全。

小知识：为什么手势密码更安全？

传统密码输入，有按键输入过程，而按下的按键，可能被木马软件记录。且密码输入框中的密码，也可能被非法获取。而手势密码则不存在这些问题。

在网页应用中，是否可以实现一个同样的效果呢？

当然可以，本文就来实现一个。

实现效果：

操作时，用鼠标移动模拟手指触摸。

源码：

创建canvas手势输入框的部分：

将此部分保存为js文件，给后面的代码引用。

注：请看到文章最后，后面还有重点内容。

(function ($) {

var GesturePasswd= function (element, options) {

this.$element = $(element);

this.options = options;

var that=this;

this.pr=options.pointRadii;

this.rr=options.roundRadii;

this.o=options.space;

this.color=options.color;

//全局样式

this.$element.css({

"position":"relation",

"width":this.options.width,

"height":this.options.height,

"background-color":options.backgroundColor,

"overflow":"hidden",

"cursor":"default"

});

//选择器规范

if(! $(element).attr("id"))

$(element).attr("id",(Math.random()*65535).toString());

this.id="#"+$(element).attr("id");

var Point = function (x,y){

this.x =x;this.y=y

};

this.result="";

this.pList=[];

this.sList=[];

this.tP=new Point(0,0);

this.$element.append('<canvas class="main-c" width="'+options.width+'" height="'+options.height+'" >');

this.$c= $(this.id+" .main-c")[0];

this.$ctx=this.$c.getContext('2d');

this.initDraw=function(){

this.$ctx.strokeStyle=this.color;

this.$ctx.lineWidth=2;

for(var j=0; j<3;j++ ){

for(var i =0;i<3;i++){

this.$ctx.moveTo(this.o/2+this.rr*2+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));

this.$ctx.arc(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr),this.rr,0,2*Math.PI);

var tem=new Point(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));

if (that.pList.length < 9)

this.pList.push(tem);

}

}

this.$ctx.stroke();

this.initImg=this.$ctx.getImageData(0,0,this.options.width,this.options.height);

};

this.initDraw();

this.isIn=function(x,y){

for (var p in that.pList){

if(( Math.pow((x-that.pList[p]["x"]),2)+Math.pow((y-that.pList[p]["y"]),2) ) < Math.pow(this.rr,2)){

return that.pList[p];

}

}

return 0;

};

this.pointDraw =function(c){

if (arguments.length>0){

that.$ctx.strokeStyle=c;

that.$ctx.fillStyle=c;

}

for (var p in that.sList){

that.$ctx.moveTo(that.sList[p]["x"]+that.pr,that.sList[p]["y"]);

that.$ctx.arc(that.sList[p]["x"],that.sList[p]["y"],that.pr,0,2*Math.PI);

that.$ctx.fill();

}

};

this.lineDraw=function (c){

if (arguments.length>0){

that.$ctx.strokeStyle=c;

that.$ctx.fillStyle=c;

}

if(that.sList.length > 0){

for( var p in that.sList){

if(p == 0){

console.log(that.sList[p]["x"],that.sList[p]["y"]);

that.$ctx.moveTo(that.sList[p]["x"],that.sList[p]["y"]);

continue;

}

that.$ctx.lineTo(that.sList[p]["x"],that.sList[p]["y"]);

console.log(that.sList[p]["x"],that.sList[p]["y"]);

}

}

};

this.allDraw =function(c){

if (arguments.length>0){

this.pointDraw(c);

this.lineDraw(c);

that.$ctx.stroke();

}

else {

this.pointDraw();

this.lineDraw();

}

};

this.draw=function(x,y){

that.$ctx.clearRect(0,0,that.options.width,that.options.height);

that.$ctx.beginPath();

that.$ctx.putImageData(this.initImg,0,0);

that.$ctx.lineWidth=4;

that.pointDraw(that.options.lineColor);

that.lineDraw(that.options.lineColor);

that.$ctx.lineTo(x,y);

that.$ctx.stroke();

};

this.pointInList=function(poi,list){

for (var p in list){

if( poi["x"] == list[p]["x"] && poi["y"] == list[p]["y"]){

return ++p;

}

}

return false;

};

this.touched=false;

$(this.id).on ("mousedown touchstart",{that:that},function(e){

e.data.that.touched=true;

});

$(this.id).on ("mouseup touchend",{that:that},function(e){

e.data.that.touched=false;

that.$ctx.clearRect(0,0,that.options.width,that.options.height);

that.$ctx.beginPath();

that.$ctx.putImageData(e.data.that.initImg,0,0);

that.allDraw(that.options.lineColor);

for(var p in that.sList){

if(e.data.that.pointInList(that.sList[p], e.data.that.pList)){

e.data.that.result= e.data.that.result+(e.data.that.pointInList(that.sList[p], e.data.that.pList)).toString();

}

}

$(element).trigger("hasPasswd",that.result);

});

$(this.id).on('touchmove mousemove',{that:that}, function(e) {

if(e.data.that.touched){

var x= e.pageX || e.originalEvent.targetTouches[0].pageX ;

var y = e.pageY || e.originalEvent.targetTouches[0].pageY;

x=x-that.$element.offset().left;

y=y-that.$element.offset().top;

var p = e.data.that.isIn(x, y);

console.log(x)

if(p != 0 ){

if ( !e.data.that.pointInList(p,e.data.that.sList)){

e.data.that.sList.push(p);

}

}

console.log( e.data.that.sList);

e.data.that.draw(x, y);

}

});

$(this.id).on('passwdWrong',{that:that}, function(e) {

that.$ctx.clearRect(0,0,that.options.width,that.options.height);

that.$ctx.beginPath();

that.$ctx.putImageData(that.initImg,0,0);

that.allDraw("#cc1c21");

that.result="";

that.pList=[];

that.sList=[];

setTimeout(function(){

that.$ctx.clearRect(0,0,that.options.width,that.options.height);

that.$ctx.beginPath();

that.initDraw()

},500)

});

$(this.id).on('passwdRight',{that:that}, function(e) {

that.$ctx.clearRect(0,0,that.options.width,that.options.height);

that.$ctx.beginPath();

that.$ctx.putImageData(that.initImg,0,0);

that.allDraw("#00a254");

that.result="";

that.pList=[];

that.sList=[];

setTimeout(function(){

that.$ctx.clearRect(0,0,that.options.width,that.options.height);

that.$ctx.beginPath();

that.initDraw()

},500)

});

};

GesturePasswd.DEFAULTS = {

zindex :100,

roundRadii:25,

pointRadii:6,

space:30,

width:240,

height:240,

lineColor:"#00aec7",

backgroundColor:"#252736",

color:"#FFFFFF"

};

function Plugin(option,arg) {

return this.each(function () {

var $this = $(this);

var options = $.extend({}, GesturePasswd.DEFAULTS, typeof option == 'object' && option);

var data = $this.data('GesturePasswd');

var action = typeof option == 'string' ? option : NaN;

if (!data) $this.data('danmu', (data = new GesturePasswd(this, options)));

if (action) data[action](arg);

})

}

$.fn.GesturePasswd = Plugin;

$.fn.GesturePasswd.Constructor = GesturePasswd;

})(jQuery);

密码校验部分：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

正确的密码是一个字母“Z”的形状哦！

<div id="gesturepwd"></div>

<script src="jquery-2.1.4.min.js"></script>

<script src="引用创建canvas手势输入框的部分代码文件"></script>

<script>

$(function(){

$("#gesturepwd").GesturePasswd({

backgroundColor:"#252736", //背景色

color:"#FFFFFF", //主要的控件颜色

roundRadii:25, //大圆点的半径

pointRadii:6, //大圆点被选中时显示的圆心的半径

space:30, //大圆点之间的间隙

width:240, //整个组件的宽度

height:240, //整个组件的高度

lineColor:"#00aec7", //用户画出线条的颜色

zindex :100 //整个组件的css z-index属性

})

$("#gesturepwd").on("hasPasswd",function(e,passwd){

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>

</body>

</html>

代码安全性：

手势密码当然也是要进行校验的，在上述验证的代码中，注意这一部分：

如果在网页查看网页源码，就会被看到JS代码中的密码。

为了防止这种问题的发生，可以用JShaman对这部分代码进行加密：

加密后的代码，将成为：

这样代码中密码泄露的问题也解决了。

完美的网页手势解锁功能完成。