canvas如何实现滑动验证

小编给大家分享一下canvas如何实现滑动验证,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

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

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如何实现滑动验证”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注恰卡编程网行业资讯频道!

发布于 2021-03-21 22:36:28
收藏
分享
海报
0 条评论
167
上一篇:Linux中shell怎么实现压缩多个文件 下一篇:AmazeUI如何实现模态窗口
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码