突然想到的方法,来试试吧
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滑动验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
前言 在上一篇文章中我为大家介绍了Simpe项目的一些 背景知识 以及如何使用 有限...
Dreamweaver中想要给文字中的个别文字添加背景色,该怎么添加呢?下面我们就来看...
事件的防抖和节流 防抖和节流函数是我们经常用到的函数,在实际的开发过程中,如...
研发背景,解决什么问题 点击约束:某个按钮触发一次点击后,待接口调用有结果都...
记录下一个疑问,最近在重新看canvas做点Demo这样,时间是写在2019年11月5日,以...
再次感谢大家对 Flutter Engage China 活动 的关注和积极参与!我们在活动前后收...
先看效果: 实现: 1.定义导航栏的文字标签: div class=tou sapn class=logo 北...
使用Dreamweaver设计了一个个人简历,想要给简历添加自己的照片,该怎么添加并排...
一、概述 上一篇文章介绍了 使用 docker 部署 spring boot 并接入 skywalking ,...
An Lock Free ID Generator for Golang implementation View on GitHub . Snowfl...