手机的手势解锁,是很好用的功能。方便,而且比输入密码更安全。
小知识:为什么手势密码更安全?
传统密码输入,有按键输入过程,而按下的按键,可能被木马软件记录。且密码输入框中的密码,也可能被非法获取。而手势密码则不存在这些问题。
在网页应用中,是否可以实现一个同样的效果呢?
当然可以,本文就来实现一个。
实现效果:
操作时,用鼠标移动模拟手指触摸。
源码:
创建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 =