canva⊙ω⊙s完成拖动认证的完成实例

2021-01-20 23:19 jianzhan

忽然想起的方式,来试一下吧

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 && 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完成拖动认证的完成实例的文章内容就详细介绍到这了,大量有关canvas拖动认证內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!