标签：function sList 网页 data 解锁 ctx var 手势 options
手机的手势解锁，是很好用的功能。方便，而且比输入密码更安全。
小知识：为什么手势密码更安全？
传统密码输入，有按键输入过程，而按下的按键，可能被木马软件记录。且密码输入框中的密码，也可能被非法获取。而手势密码则不存在这些问题。
在网页应用中，是否可以实现一个同样的效果呢？
当然可以，本文就来实现一个。
实现效果：
操作时，用鼠标移动模拟手指触摸。
源码：
创建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对这部分代码进行加密：
加密后的代码，将成为：
这样代码中密码泄露的问题也解决了。
完美的网页手势解锁功能完成。
标签：function,sList,网页,data,解锁,ctx,var,手势,options 来源： https://blog.csdn.net/w2sft/article/details/123146663
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。