小编给大家分享一下canvas如何实现滑动验证，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
突然想到的方法，来试试吧
1.页面布局
<canvasid="canva"width="500px"height="300px"></canvas>
样式
<styletype="text/css">
*{
margin:0;
padding:0;
}
#canva{
background:indianred;
}
</style>JS
<scripttype="text/javascript">
window.onload=function(){
varcanva=document.getElementById('canva');
varctx=canva.getContext('2d');
varh=canva.height;
varw=canva.width;
varrext={//定义验证块的属性
x:Math.random()*(w-50),
y:Math.random()*(h-50),
}
varhk={//滑块属性
x:'0',
y:''
}
Rect();//绘制验证块
Hk(0,rext.y);//绘制滑块
canva.addEventListener('click',function(){
varev=ev||event;
varx=ev.clientX;
vary=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);
//绘制滑块
varhk_x=ev.clientX;
varyz_x=rext.x;
(function(x,y){
if(x>y&&x<y+50){
console.log("验证成功");
}
})(hk_x,yz_x)//判断验证的匿名函数
})
}
})//点击事件的处理
functionRect(){
ctx.fillStyle='whitesmoke';
ctx.fillRect(rext.x,rext.y,50,50);
}
functionHk(x,y){
hk.x=x;
hk.y=y;
ctx.fillRect(hk.x,hk.y,50,50);
}
}
</script>以上是“canvas如何实现滑动验证”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！
