脚本宝典收集整理的这篇文章主要介绍了canvas实现滑动验证的实现示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
突然想到的方法，来试试吧
1.页面布局
<canvas id="canva" width="500px" height="300px"></canvas>
样式
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实现滑动验证的实现示例的文章就介绍到这了,更多相关canvas滑动验证内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的canvas实现滑动验证的实现示例全部内容，希望文章能够帮你解决canvas实现滑动验证的实现示例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。