03-25 08:04 阅读 112

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

这篇文章主要介绍了canvas实现滑动验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

1.页面布局

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

样式

<style type="text/css">

*{

            margin: 0;

            padding: 0;

}

        #canva{

                background: indianred;

}

</style> 

<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实现滑动验证的实现示例的文章就介绍到这了