仿手机9宫格图形解屏效果

拼搏现实的明天。 2022-05-29 09:44 134阅读 0赞

<!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="UTF-8">  
        <title>手机锁屏9宫键解屏效果</title>  
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #canvas-div{
                padding-right: 16px;
                margin: 0 auto;
                width: 300px;
                height: 360px;
            }
            canvas{
                border: 1px solid red;
                width: 100%;
                height: 100%;
            }
            .circle{
                width: 60px;
                height: 60px;
                background: teal;
                border-radius: 48px;
                position: absolute;
                text-align: center;
                line-height: 60px;
                font-weight: bold;
                font-size: 25px;
            }
            .circle:hover{
                cursor: pointer;
            }
            .one,.two,.three{
                top:30px;
            }
            .seven,.eight,.nine{
                top: 260px;
            }
            .four,.five,.six{
                top: 145px;
            }
            .one,.four,.seven{
                left:43%;
            }
            .two,.five,.eight{
                left:48%;
            }
            .three,.six,.nine{
                left:53%;
            }
            .selected{
                background: purple;
            }
        </style>
    </head>  
    <body  onselectstart="return false">  
    
    
        <div id="canvas-div">
              
            <canvas id="myCanvas" >  
            您的浏览器不支持canvas标签。   
            </canvas>
        </div>
        <div id="one" class="circle one">1</div>
        <div id="two" class="circle two">2</div>  
        <div id="three" class="circle three">3</div>  
        <div id="four" class="circle four">4</div>  
        <div id="five" class="circle five">5</div>  
        <div id="six" class="circle six">6</div>  
        <div id="seven" class="circle seven">7</div>  
        <div id="eight" class="circle eight">8</div>  
        <div id="nine" class="circle nine">9</div>
        <div id="select_no" hidden></div>  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");  
        var ctx = canvas.getContext("2d");    
        var cx1 = canvas.offsetLeft;
        var cy1 = canvas.offsetTop;
        var cx2 = canvas.offsetLeft + canvas.offsetWidth;
        var cy2 = canvas.offsetTop + canvas.offsetHeight;
        var lock_secret = '123456';//锁屏密码
        document.onmousedown = function(event){
            var x = event.clientX;
            var y = event.clientY;
            if(x > cx1 && x < cx2 && y > cy1 && y < cy2){//在画布内才有效
                $('.circle').each(function(index, el) {
                    var divx1 = el.offsetLeft - cx1;
                    var divy1 = el.offsetTop - cy1;
                    var divx2 = (el.offsetLeft + el.offsetWidth) - cx1;
                    var divy2 = (el.offsetTop + el.offsetHeight) - cy1;
                    var re_x = x - cx1;
                    var re_y = y - cy1;
                    if(re_x > divx1 && re_x < divx2 && re_y > divy1 && re_y < divy2){
                        if(!$(this).hasClass('selected')){
                            select_no.append($(this).html());
                            $(this).addClass('selected');
                        }
                        var div_center_x = (divx2 + divx1) / 2;//圆点中心点x坐标
                        var div_center_y = (divy2 + divy1) / 2;//圆点中心点y坐标
                        localStorage.setItem('center',div_center_x + ',' + div_center_y);
                        ctx.beginPath(); //开始一个新的绘制路径
                        var res = getLocation(event);
                        ctx.lineWidth = 5; //设置线段的宽度
                        ctx.moveTo(res['x'], res['y']); //定义直线的起点坐标为(10,10)
                    }
                });
                document.onmousemove = function(event){
                    document.onmousedown = null;
                    var x = event.clientX;
                    var y = event.clientY;
                    if(x > cx1 && x < cx2 && y > cy1 && y < cy2){//在画布内才有效
                        $('.circle').each(function(index, el) {
                            var divx1 = el.offsetLeft - cx1;
                            var divy1 = el.offsetTop - cy1;
                            var divx2 = (el.offsetLeft + el.offsetWidth) - cx1;
                            var divy2 = (el.offsetTop + el.offsetHeight) - cy1;
                            var re_x = x - cx1;
                            var re_y = y - cy1;
                            if(re_x > divx1 && re_x < divx2 && re_y > divy1 && re_y < divy2){
                                if(!$(this).hasClass('selected')){
                                    select_no.append($(this).html());
                                    $(this).addClass('selected');
                                }
                            }
                            var res = getLocation(event);
                            ctx.lineTo(res['x'], res['y']); //定义直线的终点坐标为(50,10) 
                            ctx.strokeStyle = "blue";
                            ctx.lineCap = 'round';
                            ctx.stroke(); //沿着坐标点顺序的路径绘制直线 
                        });
                    }  
                }
    
    
                document.onmouseup = function(event){
                    document.onmousemove = null;
                    document.onmouseup = null;
                    var x = event.clientX;
                    var y = event.clientY;
                    if(x > cx1 && x < cx2 && y > cy1 && y < cy2){//在画布内才有效
                        $('.circle').each(function(index, el) {
                            var divx1 = el.offsetLeft - cx1;
                            var divy1 = el.offsetTop - cy1;
                            var divx2 = (el.offsetLeft + el.offsetWidth) - cx1;
                            var divy2 = (el.offsetTop + el.offsetHeight) - cy1;
                            var re_x = x - cx1;
                            var re_y = y - cy1;
                            var re_ordinate = re_x + ',' + re_y;
                            if(re_x > divx1 && re_x < divx2 && re_y > divy1 && re_y < divy2 && re_ordinate != center_ordinate){
                                var center_ordinate = localStorage.getItem('center');
                                var div_center_x = (divx2 + divx1) / 2;//圆点中心点x坐标
                                var div_center_y = (divy2 + divy1) / 2;//圆点中心点y坐标
                                if((div_center_x + ',' + div_center_y) != center_ordinate){//不同个圆圈内才绘画图形
                                    var res = getLocation(event);
                                    ctx.lineTo(res['x'], res['y']); //定义直线的终点坐标为(50,10) 
                                    ctx.stroke(); //沿着坐标点顺序的路径绘制直线 
                                    ctx.closePath(); //关闭当前的绘制路径     
                                }
                            }
                        });
                        var selected_secret = $('#select_no').html();
                        if(selected_secret == lock_secret){
                            alert('解屏成功');
                            location.href = "http://www.baidu.com";//目标地址
                        }else{
                            alert('密码错误');
                            location.reload();
                        }
                    }
                }
            }  
        }
    
    
        //获取画布内的某点坐标
        function getLocation(event) {  
            var bbox = canvas.getBoundingClientRect();  
            return {
                'x' : (event.clientX - bbox.left) * (canvas.width / bbox.width),  
                'y' : (event.clientY - bbox.top) * (canvas.height / bbox.height)
            };  
        }   
    </script>  
    </body>  
    </html>

效果截图：

![Image 1][]

[Image 1]: