小编给大家分享一下canvas如何实现滑动验证，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
突然想到的方法，来试试吧
1.页面布局
计算
安全
数据库
网络和加速
企业服务
<canvas id="canva" width="500px" height="300px"></canvas>样式
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#canva{
background: indianred;
}
</style>JS
<script type="text/javascript">
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<=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<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);
}
}
</script>以上是“canvas如何实现滑动验证”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/html5/739937.html
