这篇文章主要介绍了canvas实现滑动验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
突然想到的方法，来试试吧
1.页面布局
样式
*{
margin: 0;
padding: 0;
}
#canva{
background: indianred;
}
JS
window.onload=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=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<y+50){
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滑动验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www.jb51.net/html5/739937.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：SEO优化专员，转转请注明出处：https://www.chuangxiangniao.com/p/892344.html
