canvas实现滑动验证的实现示例


Posted in HTML / CSS onAugust 11, 2020

突然想到的方法,来试试吧

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滑动验证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 #HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 #HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 #HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 #HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 #HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 #HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 #HTML / CSS
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
杏林同学录(五)
2006/10/09 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
php阳历转农历优化版
2016/08/08 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
utf8的编码算法 转载
2006/12/27 Javascript
用javascript实现画板的代码
2007/09/05 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
Vue表单实例代码
2016/09/05 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
详解vue.js全局组件和局部组件
2017/04/10 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
python实现文件路径和url相互转换的方法
2015/07/06 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
护理中职生求职信范文
2014/02/24 职场文书
教堂婚礼主持词
2014/03/14 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
《穷人》教学反思
2014/04/08 职场文书
校园绿化美化方案
2014/06/08 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书