canvas如何实现滑动验证

小编给大家分享一下canvas如何实现滑动验证，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

页面布局

<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如何实现滑动验证”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！