canvas实现滑动验证的实现示例
小红书种草一手资源覆盖200+行业
这篇文章主要介绍了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实现滑动验证的实现示例的文章就介绍到这了,更多相关canvas滑动验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www.jb51.net/html5/739937.html
尊敬的看官您对canvas实现滑动验证的实现示例有什么看法呢？互联网品牌制作专家愿与您共同探讨！版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请加微信号oem365 举报，一经查实，本站将立刻删除。上一篇: 解决html5中的video标签ios系统中无法播放使用的问题 返 回 下一篇:企业网站SEO优化运营：网站为什么不收录？
