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

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

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

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

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

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

实现效果：

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

源码：

创建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(’’);

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

this. c t x =