html页面实现滑动验证,canvas实现滑动验证的实现示例

突然想到的方法，来试试吧

1.页面布局

样式

*{

margin: 0;

padding: 0;

}

#canva{

background: indianred;

}

js

window.οnlοad=function(){

var canva=document.getelementbyid('canva');

var ctx =canva.getcontext('2d');

var h=canva.height;

var w=canva.width;

var rext={ //定义验证块的属性

x:math.random()*(w-50),

y:math.random()*(h-50),

}

var hk={ //滑块属性

x:'0',

y:''

}

rect(); //绘制验证块

hk(0,rext.y); //绘制滑块

canva.addeventlistener('click',function(){

var ev=ev||event;

var x=ev.clientx;

var y=ev.clienty;

if(x>=0 && x<=50 && y>=rext.y && y<=rext.y+50 ){//canvas内部监听

canva.addeventlistener('mousemove',function(ev){

ev=ev||event;

ctx.clearrect(hk.x,hk.y,50,50); //清除滑块

hk.x=ev.clientx;

hk(hk.x,rext.y);

//绘制滑块

var hk_x=ev.clientx;

var yz_x=rext.x;

(function(x,y){

if(x>y && x

console.log("验证成功");

}

})(hk_x,yz_x) //判断验证的匿名函数

})

}

}) //点击事件的处理

function rect(){

ctx.fillstyle='whitesmoke';

ctx.fillrect(rext.x,rext.y,50,50);

}

function hk(x,y){

hk.x=x;

hk.y=y;

ctx.fillrect(hk.x,hk.y,50,50);

}

}

目前基本的效果已经出来了，虽然验证的地方有点问题，不过整体的功能还是实现了，完结撒花，以后再慢慢完善~

到此这篇关于canvas实现滑动验证的实现示例的文章就介绍到这了,更多相关canvas滑动验证内容请搜索萬仟网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持萬仟网！