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

最新推荐文章于 2021-06-05 01:39:13 发布
最新推荐文章于 2021-06-05 01:39:13 发布
阅读量710 收藏
点赞数 1
分类专栏： HTML4/HTML5 文章标签： 画布技术 九宫格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27682041/article/details/79641334
版权 

<!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标签，并加上红色边框以便于在页面上查看 -->  
        <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>  

效果截图：





sensus森森
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
九宫格ui后台模板
04-01
九宫格ui后台模板
仿微信朋友圈9宫格图片选择器可删除.zip
06-08
"仿微信朋友圈9宫格图片选择器"就是一个典型的例子，它模仿了微信在朋友圈发布时的图片选择体验，允许用户以9宫格的形式预览和选择图片，同时还提供了可删除功能，使得用户能够更加方便地调整自己的图片选择。...
android 九格锁屏,自定义 View 之实现九宫格锁屏效果
weixin_36240214的博客
05-29 578
Android 锁屏功能是我们最常用的、最经常接触的一个软件之一了吧，因为我个人也是使用的 Android 手机，虽然手机不怎么好，但是也有锁屏这个功能。虽然现在的手机都是指纹解锁，但是我的手机解锁功能，它被我设置了一种模式，就是当我离开手机超过一定时间，或者说手机很长一段时间处于没有使用状态时，它就会自动给你锁上，而且这个锁只能靠屏幕设定的九宫格锁来解除这个模式，不能通过指纹来解锁。说了这么多，...
九宫格样式
Just Do It
09-08 1239
NSInteger pageNum = ([self.dataArray count]) / iconCount; NSInteger num = ([self.dataArray count]) % iconCount > 0 ? 1 : 0; self.rootScrollView.contentSize = CGSizeMake((pageNum+num) *
android 破解九宫格
weixin_33795833的博客
11-15 71
将目录切换到D：/adb目录下，命令如下 敲入命令adbshell然后回车，可以见到如下结果 再敲入命令cd/data/system然后回车， 再执行rmgesture.key回车，搞定，破解成功 这时你打开手机会发现9宫格界面还在，没...
android 炫酷图案解锁,16个超级漂亮的手机锁屏图案，炫酷到飞起，总有一款适合你...
weixin_32085599的博客
05-29 9612
九宫格手机解锁图案又称为手势密码，在手机屏幕上设置一笔连成的九宫格图案，在解锁时画一下设置的图案就能解锁，如今已经成为智能手机的标配，在支付宝，微信钱包等一些软件中也可以设置手势密码以保护手机安全。而在手势密码中，有一款叫做“南海莲花” 因为其线条综合交错，被网友称为最复杂的手势密码，另外还有“后羿射日” ，“鲁班锁”，“织女纺艺” ，“木马流牛” ，“诸葛连弩” ，“电光人音墙” ，“磁暴线圈”...
仿微信9宫格上传图片
03-02
实现类似微信的9宫格 ，从相册选9张或直接拍照 ，获得后，对图片做bitmap的转换处理，处理完成后，逐一向服务器上传，成功后，保存服务器返回的路径
html大屏自定义宫格，6宫格9宫格12宫格自定义替换合并
最新发布
09-18
最近有个大屏需要用到自定义大屏，还是拖动替换内容的，使用12宫格的形式 于是使用jquery写了个拖动各种宽高替换宫格位置的demo 比较简单，有数据提交和回显替换的表格功能 ...支持自定义6宫格9宫格12宫格等
jQuery 9宫格抽奖
04-28
【jQuery 9宫格抽奖】是一种常见的互动设计，常用于线上活动或年会抽奖环节，为用户提供直观且吸引人的参与体验。此插件基于流行的JavaScript库jQuery构建，旨在实现一个适用于移动端和电脑端的可自定义抽奖界面。...
Android9宫格
08-07
在Android开发中，"9宫格"是一种常见的用户界面元素，尤其在设置、应用选择等场景下被广泛应用。9宫格通常由一个3x3的网格组成，每个小方格可以代表一个功能或者链接到相应的操作。这个设计简洁直观，易于用户理解和...
qt六宫格界面
04-02
六宫格界面
HTML九宫格解锁
01-03
html+JS实现网页版的九宫格解锁,模拟了android九宫格解锁
九宫格布局，显示不同的图片和文字
05-30
因为项目需要九宫格布局做为首页，所有自己写了一个。
html5九宫格布局的网格菜单效果.zip
07-11
这是一个九宫格菜单动画，html5全屏展开网格布局菜单，点击全屏背景切换显示。
bootstrap 模板9个免费
05-28
bootstrap免费模板9个， 网上下载的9个免费 bootStrap模板，请放心使用
bootstrap九宫格布局，点击其中一个DIV，弹框显示其内容
热门推荐
ankora的博客
10-20 1万+
bootstrap 业务员 出单量 总保费 aaaaaaa bbbbbbbb ccccccccc aaaaaaa
手机的九宫格图案解锁总共能绘出多少种图案？（hiho模拟面试题2 - google在线技术笔试模拟）
苏苏爱自由
05-04 8166
滑动解锁是智能手机一项常用的功能。你需要在3x3的点阵上，从任意一个点开始，反复移动到一个尚未经过的"相邻"的点。这些划过的点所组成的有向折线，如果与预设的折线在图案、方向上都一致，那么手机将解锁。两个点相邻当且仅当以这两个点为端点的线段上不存在尚未经过的点。此外，这条折线还需要至少经过4个点。 为了描述方便，我们给这9个点从上到下、从左到右依次编号1-9。那么1->2->3是不合法的，因为
完美的实现九宫格锁屏
qq_31524549的博客
04-13 4791
都为梦中的明天 ————阿德
Html5响应式设计实现九宫格,Html5响应式设计实现九宫格，html5响应九宫格
weixin_35879114的博客
06-05 310
Html5响应式设计实现九宫格，html5响应九宫格自从响应式设计的理念提出以来，越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如：小米商城，天猫等。至于响应式设计的概念等大家可以去百度百度，我这里就不相信讲解了。直接为大家带来源码，用Html5实现响应式的九宫格。代码如下：html5响应式九宫格html, body { color:#222; font-family:Micr...
利用gridlayout布局，实现手机9宫格布局。
05-16
可以使用如下代码实现： ```java import java.awt.GridLayout; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; public class NineGridLayout extends JFrame { private static final long serialVersionUID = 1L; public NineGridLayout() { // 设置窗口的基本属性 this.setTitle("NineGridLayout"); this.setSize(300, 300); this.setLocationRelativeTo(null); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 创建一个九宫格面板 JPanel panel = new JPanel(new GridLayout(3, 3, 5, 5)); // 循环添加按钮 for (int i = 1; i <= 9; i++) { JButton button = new JButton(String.valueOf(i)); panel.add(button); } // 将面板添加到窗口中 this.add(panel); // 显示窗口 this.setVisible(true); } public static void main(String[] args) { new NineGridLayout(); } } ``` 这里使用了 `GridLayout` 布局，通过指定行数和列数以及行间距和列间距来创建一个九宫格面板，然后循环添加按钮，最后将面板添加到窗口中并显示窗口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值