canvas实现滑动验证的实现示例
程序员文章站
2022-06-18 11:06:03
canvas实现滑动验证的实现示例这篇文章主要介绍了canvas实现滑动验证的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-08-11...
突然想到的方法,来试试吧
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滑动验证内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!