怎么實(shí)現(xiàn)前端滑動(dòng)驗(yàn)證效果？canvas滑動(dòng)驗(yàn)正效果代碼詳解！

在之前我們的登錄方法和驗(yàn)證賬號(hào)安全性的方法都是簡(jiǎn)單的短信和密碼的方法，那么在這幾年慢慢盛行了滑動(dòng)的驗(yàn)證方法，那么下面我們就來(lái)說(shuō)下有關(guān)于：“怎么實(shí)現(xiàn)前端滑動(dòng)驗(yàn)證效果？”這個(gè)問(wèn)題的實(shí)現(xiàn)方法吧！ 

1.頁(yè)面布局

<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={                          //定義驗(yàn)證塊的屬性
            x:Math.random()*(w-50),
            y:Math.random()*(h-50),
        }
        var hk={                           //滑塊屬性
            x:'0',
            y:''
        }
        Rect();                            //繪制驗(yàn)證塊
        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內(nèi)部監(jiān)聽(tīng)
                   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("驗(yàn)證成功");
                            }
                        })(hk_x,yz_x)      //判斷驗(yàn)證的匿名函數(shù)
                   })              

                }
            })   //點(diǎn)擊事件的處理

        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> 

目前基本的效果已經(jīng)出來(lái)了，雖然驗(yàn)證的地方有點(diǎn)問(wèn)題，不過(guò)整體的功能還是實(shí)現(xiàn)了，完結(jié)撒花，以后再慢慢完善~

那么以上就是有關(guān)于：“怎么實(shí)現(xiàn)前端滑動(dòng)驗(yàn)證效果？”這方面的相關(guān)內(nèi)容分享，更多有關(guān)于html這方面的相關(guān)內(nèi)容我們都可以在 W3Cschool進(jìn)行學(xué)習(xí)和了解！