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

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

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 &
    &
 xy+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滑动验证内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！