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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
使用CSS定位HTML元素的实现方法
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
谈谈PHP语法(2)
2006/10/09 PHP
PHP个人网站架设连环讲(三)
2006/10/09 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
微信小程序开发探究
2016/12/27 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
import的本质解析
2017/10/30 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python re模块常见用法例举
2021/03/01 Python
详解rem 适配布局
2018/10/31 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
个人简历中自我评价
2014/02/11 职场文书
运动会加油口号
2014/06/07 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
员工保密协议书
2014/09/27 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
初中军训感想
2015/08/07 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers