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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
css3新特性的应用示例分析
Mar 16 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
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
常用的javascript function代码
2008/05/23 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
三种取消选中单选框radio的方法
2014/09/09 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python web框架 django wsgi原理解析
2019/08/20 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
使用Python发现隐藏的wifi
2020/03/04 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
大学生物业管理求职信
2013/10/24 职场文书
初中体育教学反思
2014/01/14 职场文书
运动会稿件100字
2014/02/21 职场文书
批评与自我批评总结
2014/10/17 职场文书
团队拓展训练感想
2015/08/07 职场文书