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

用户m7ejstt

突然想到的方法，来试试吧
1.页面布局

1. <canvas id="canva" width="500px" height="300px"></canvas>

复制代码

样式

1. <style type="text/css">
   
2.         *{
   
3.             margin: 0;
   
4.             padding: 0;
   
5.         }
   
6.         #canva{
   
7.                 background: indianred;
   
8.         }
   
9. </style>

复制代码

JS

1. <script type="text/javascript">
   
2.     window.onload=function(){
   
3.         var canva=document.getElementById('canva');
   
4.         var ctx  =canva.getContext('2d');
   
5.         var h=canva.height;     
   
6.         var w=canva.width;
   
7.         var rext={                          //定义验证块的属性
   
8.             x:Math.random()*(w-50),
   
9.             y:Math.random()*(h-50),
   
10.         }
    
11.         var hk={                           //滑块属性
    
12.             x:'0',
    
13.             y:''
    
14.         }
    
15.         Rect();                            //绘制验证块
    
16.         Hk(0,rext.y);                      //绘制滑块
    
17. 
    
18.         canva.addEventListener('click',function(){
    
19.                 var ev=ev||event;
    
20.                 var x=ev.clientX;
    
21.                 var y=ev.clientY;
    
22.                 if(x>=0 && x<=50 && y>=rext.y && y<=rext.y+50  ){//canvas内部监听
    
23.                    canva.addEventListener('mousemove',function(ev){
    
24.                         ev=ev||event;
    
25.                         ctx.clearRect(hk.x,hk.y,50,50);   //清除滑块            
    
26.                         hk.x=ev.clientX;   
    
27.                         Hk(hk.x,rext.y);
    
28.                         //绘制滑块
    
29.                         var hk_x=ev.clientX;
    
30.                         var yz_x=rext.x;
    
31.                         (function(x,y){
    
32.                             if(x>y && x<y+50){
    
33.                                 console.log("验证成功");
    
34.                             }
    
35.                         })(hk_x,yz_x)      //判断验证的匿名函数
    
36.                    })              
    
37. 
    
38.                 }
    
39.             })   //点击事件的处理
    
40. 
    
41.         function Rect(){
    
42.             ctx.fillStyle='whitesmoke';
    
43.             ctx.fillRect(rext.x,rext.y,50,50);
    
44.         }
    
45.         function Hk(x,y){
    
46.             hk.x=x;
    
47.             hk.y=y;
    
48.             ctx.fillRect(hk.x,hk.y,50,50);  
    
49.         }   
    
50.     }
    
51. </script>

复制代码

目前基本的效果已经出来了，虽然验证的地方有点问题，不过整体的功能还是实现了，完结撒花，以后再慢慢完善~
到此这篇关于canvas实现滑动验证的实现示例的文章就介绍到这了,更多相关canvas滑动验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

血雨白涯

我完全同意你的观点

打乳面

我们一起努力，共同解决问题吧。

梦幻星空88

谢谢你分享这个信息

帅的我想飞起来

非常感谢你的观点，让我受益良多！

上市基金1

我想了解更多

小皮解说

友善的讨论氛围是非常重要的。

烈酒醉人.

谢谢你分享这个信息

kengdie

牛逼

我也只能苦笑了

我不太确定，可能需要再确认一下。