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 相关文章推荐
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
css 中多种边框的实现小窍门
Apr 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
php字符串截取的简单方法
2013/07/04 PHP
PHP网络操作函数汇总
2015/05/18 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python常用小技巧总结
2015/06/01 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Django  ORM 练习题及答案
2019/07/19 Python
python 动态调用函数实例解析
2019/10/21 Python
python super函数使用方法详解
2020/02/14 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
一份报关员的职业规划范文
2014/01/08 职场文书
代办社保委托书范文
2014/10/06 职场文书
加强作风建设工作总结
2014/10/23 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技