我要评论突然想到的方法，来试试吧
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实现滑动验证的实现示例的文章就介绍到这了,更多相关canvas滑动验证内容请搜索移动技术网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持移动技术网！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论