您的位置:奥门新浦京网址 > Wed前段 > 手势解锁,三角形运用

手势解锁,三角形运用

发布时间:2019-10-24 03:06编辑:Wed前段浏览(130)

    酷酷的 CSS3 三角形运用

    2016/08/04 · CSS · 2 评论 · CSS3, 三角形

    原文出处: keepfool   

    用 canvas 实现 Web 手势解锁

    2017/04/04 · HTML5 · Canvas

    原文出处: songjz   

    最近参加 360 暑假的前端星计划,有一个在线作业,截止日期是 3 月 30 号,让手动实现一个 H5 手势解锁,具体的效果就像原生手机的九宫格解锁那样。

    图片 1

    实现的最终效果就像下面这张图这样:

    图片 2

    基本要求是这样的:将密码保存到 localStorage 里,开始的时候会从本地读取密码,如果没有就让用户设置密码,密码最少为五位数,少于五位要提示错误。需要对第一次输入的密码进行验证,两次一样才能保持,然后是验证密码,能够对用户输入的密码进行验证。

    移动端h5开发相关内容总结(四)

    2017/02/06 · HTML5 · 1 评论 · 移动端

    本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    概述

    在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。

    在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成。在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师!

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!

    Triangle Demo  |  Page Demo  |  GitHub Source

    H5 手势解锁

    扫码在线查看:

    图片 3

    或者点击查看手机版。

    项目 GitHub 地址,H5HandLock。

    首先,我要说明一下,对于这个项目,我是参考别人的,H5lock。

    我觉得一个比较合理的解法应该是利用 canvas 来实现,不知道有没有大神用 css 来实现。如果纯用 css 的话,可以将连线先设置 display: none,当手指划过的时候,显示出来。光设置这些应该就非常麻烦吧。

    之前了解过 canvas,但没有真正的写过,下面就来介绍我这几天学习 canvas 并实现 H5 手势解锁的过程。

    前言:

    看了下博客的更新时间,发现9月份一篇也没有更新。一直想着都要抽时间写一篇的,不然今年的更新记录就会断在了9月份。但是还是应为各种各样的事情给耽搁了。当内心突然涌起一股必须写点什么的时候,突然发现自己把写博客的“套路”都忘了。(●´ω`●)φ

    一直认为自己还是一个比较热爱思考的人。最近一直在思考两个问题:

    1. 自己做技术的初衷;
    2. 自己的技术成长之路;

    当然这两篇文章自己也在润色之中,相信很快会跟大家见面。

    废话不多说。来正菜。

    图例

    我们先来看一副设计图

    图片 4

    这幅图复杂的元素不多,布局也较为简单,我们大致分析一下,需要PS美工爸爸帮忙做的只有一件事情,就是将上半部分的蓝色背景图给抠出来。
    除此之外,出现在这幅设计图的一些特殊形状和小图标,都可以通过CSS3来实现。
    我们将这些特殊形状和小图标分为两类:

    1. 可以用Icon Font实现的

    图片 5图片 6

    Icon Font是将一些图标作成字体文件,在CSS中指定font-face和font-family,然后为每个图标指定相应的class。
    在网页中使用Icon Font就像使用普通的文字一样,比如font-size属性可以设定图标的大小,设定color属性可以设定图标的颜色。 更多内容,请参考阿里巴巴矢量图标管理网站:。

    2. 不能用IconFont实现的

    图片 7

    为什么这些图形不用IconFont实现呢?因为通常Icon Font提供的都是一些正方形的矢量图标,也就是长等于宽的图标。
    本篇要讲的就是如何通过CSS3来实现这4个图形。

    准备及布局设置

    我这里用了一个比较常规的做法:

    (function(w){ var handLock = function(option){} handLock.prototype = { init : function(){}, ... } w.handLock = handLock; })(window) // 使用 new handLock({ el: document.getElementById('id'), ... }).init();

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    (function(w){
      var handLock = function(option){}
     
      handLock.prototype = {
        init : function(){},
        ...
      }
     
      w.handLock = handLock;
    })(window)
     
    // 使用
    new handLock({
      el: document.getElementById('id'),
      ...
    }).init();

    常规方法,比较易懂和操作,弊端就是,可以被随意的修改。

    传入的参数中要包含一个 dom 对象,会在这个 dom 对象內创建一个 canvas。当然还有一些其他的 dom 参数,比如 message,info 等。

    关于 css 的话,懒得去新建文件了,就直接內联了。

    1.背景色与透明度相关知识

    好吧。至从自己到了新的工作环境以后,开发环境又从只需要兼容 IE8 以上回到了必须兼容 IE6 浏览器上来。所以在第一次做项目的时候,还是遇到一些兼容低版本IE浏览器的问题。

    首先来看一个背景透明的问题,背景透明有三种解决方案:

    1. IE6-7使用滤镜;
    2. opcity;
    3. rgba;

    但是他们也有些细微的差别总结如下:

    图片 8

    示例效果如下(如果可以的话,自己可以写一个简单的demo看下效果):

    第一个是opcity和rgab的区别

    图片 9

    第二张是在ie6中的效果:

    图片 10

    当我们在兼容低版本浏览器的时候可能下面的写法可以满足我们的需求(两个属性都写上,浏览器识别的属性直接覆盖前者的属性):

    CSS

    .item1{ opacity:0.1;//IE8以上浏览器识别 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);//滤镜低版本IE7-8支持 }

    1
    2
    3
    4
    .item1{
        opacity:0.1;//IE8以上浏览器识别
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);//滤镜低版本IE7-8支持
    }

    三角形

    不知大家注意到了没有,这4个图形都包含了一个特殊的元素——三角形。
    这4个图形,都是由三角形、长方形,或者是一个被啃掉了一口的长方形组成的。

    CSS3是如何实现三角形的呢?——答案是通过边框,也就是border属性。

    canvas

    2. html5标签呼起系统发件箱

    做html5开发的过程中,我们可能会有这样的需求:

    点击按钮,呼起系统的发送短信的窗口,并且自动填充发送到的号码和内容;

    网络上可以很容易的找到这方面的demo ,并且也可以找到在安卓上和ios上是有却别的:

    XHTML

    <!-- ios--> <a href="sms:10086&body=发送的内容">点击我发送短信</a> <!-- android--> <a href="sms:10086?body=发送的内容">点击我发送短信</a>

    1
    2
    3
    4
    <!-- ios-->
    <a href="sms:10086&body=发送的内容">点击我发送短信</a>
    <!-- android-->
    <a href="sms:10086?body=发送的内容">点击我发送短信</a>

    但是在实际的开发过程中却遇到了很多坑。主要原因是:
    除了安卓和IOS系统的写法不同外,ios不同系统版本写法也不同。而且在不同的app中也有不同。

    上面的原因是在生产环境遇到的问题。刚开始因为找不到相关可以查阅的文档只能不做兼容。偶然一次在 stackoverflow 发现了问题的原因。

    原文内容如下:

    图片 11

    翻译后总结如下:

    图片 12

    所以,如果在生产环境中有呼起系统发件箱并且填充号码和内容的请注意以上的区别。

    长方形边框

    HTML的块级元素都是长方形的,比如我们设定了以下样式:

    JavaScript

    <style> .simple-retangle { margin: 50px auto; width: 200px; height: 200px; border: 40px solid salmon; } </style> <div class="simple-retangle"></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        .simple-retangle {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border: 40px solid salmon;
        }
    </style>
    <div class="simple-retangle"></div>

    如大家所认知的,这只是一个简单的长方形,这个长方形在画面中是这样显式的:

    图片 13

    这个长方形太单调了,再给它点颜色看看,咱们来个彩色边框吧。

    JavaScript

    <style> .colored-border-retangle { margin: 50px auto; width: 200px; height: 200px; border-top: 40px solid coral; border-right: 40px solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid mediumpurple; } </style> <div class="colored-border-retangle"></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
        .colored-border-retangle {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }
    </style>
    <div class="colored-border-retangle"></div>

    在画面中,每个边框都变成一个梯形了。

    图片 14

    为什么它会变成梯形呢?

    图片 15

    请注意长方形的4个角,以左上角为例,它到底是属于左边框还是上边框呢?
    左上角,既属于左边框,又属于上边框,角落的归属成了一个问题,浏览器为了不让边框打架,就让二位各分一半吧。
    于是乎左上角就被一分为二,变成了两个三角形,三角形靠近哪个边框,就显示那个边框的颜色。

    1. 学习 canvas 并搞定画圆

    MDN 上面有个简易的教程,大致浏览了一下,感觉还行。Canvas教程。

    先创建一个 canvas,然后设置其大小,并通过 getContext 方法获得绘画的上下文:

    var canvas = document.createElement('canvas'); canvas.width = canvas.height = width; this.el.appendChild(canvas); this.ctx = canvas.getContext('2d');

    1
    2
    3
    4
    5
    var canvas = document.createElement('canvas');
    canvas.width = canvas.height = width;
    this.el.appendChild(canvas);
     
    this.ctx = canvas.getContext('2d');

    然后呢,先画 n*n 个圆出来:

    JavaScript

    createCircles: function(){ var ctx = this.ctx, drawCircle = this.drawCircle, n = this.n; this.r = ctx.canvas.width / (2 + 4 * n) // 这里是参考的,感觉这种画圆的方式挺合理的,方方圆圆 r = this.r; this.circles = []; // 用来存储圆心的位置 for(var i = 0; i < n; i++){ for(var j = 0; j < n; j++){ var p = { x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r, id: i * 3 + j } this.circles.push(p); } } ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 为了防止重复画 this.circles.forEach(function(v){ drawCircle(ctx, v.x, v.y); // 画每个圆 }) }, drawCircle: function(ctx, x, y){ // 画圆函数 ctx.strokeStyle = '#FFFFFF'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(x, y, this.r, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke(); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    createCircles: function(){
      var ctx = this.ctx,
        drawCircle = this.drawCircle,
        n = this.n;
      this.r = ctx.canvas.width / (2 + 4 * n) // 这里是参考的,感觉这种画圆的方式挺合理的,方方圆圆
      r = this.r;
      this.circles = []; // 用来存储圆心的位置
      for(var i = 0; i < n; i++){
        for(var j = 0; j < n; j++){
          var p = {
            x: j * 4 * r + 3 * r,
            y: i * 4 * r + 3 * r,
            id: i * 3 + j
          }
          this.circles.push(p);
        }
      }
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 为了防止重复画
      this.circles.forEach(function(v){
        drawCircle(ctx, v.x, v.y); // 画每个圆
      })
    },
     
    drawCircle: function(ctx, x, y){ // 画圆函数
      ctx.strokeStyle = '#FFFFFF';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.stroke();
    }

    画圆函数,需要注意:如何确定圆的半径和每个圆的圆心坐标(这个我是参考的),如果以圆心为中点,每个圆上下左右各扩展一个半径的距离,同时为了防止四边太挤,四周在填充一个半径的距离。那么得到的半径就是 width / ( 4 * n + 2),对应也可以算出每个圆所在的圆心坐标,也有一套公式,GET

    3.input标签选择系统文件的问题

    在html5中 input标签提供给了开发者访问系统文件的能力。说实话如果仅仅在移动端的系统浏览器中使用input控件真的没有发现什么问题。但是在app的**webview**中却处处是坑。以下是总结出的一些经验。

    <input type="file">在webview中访问系统文件遇到的一些问题:

    1. 触发input后,页面“闪退”(现象就是,文件选择框出现后又立马关闭);当初遇到这个问题是在贴吧的客户端中,听贴吧的兄弟说,他们后来做了兼容。
    2. 华为手机中可以正常的呼起系统选择文件的窗口,但是无法正常读取系统文件(最后跟客户端的同学确定,如果h5在webview中读取系统文件,是需要权限的,也就是说需要客户端支持);
    3. 在ios的webview中也会出现问题。如果有兴趣的同学可以参考这篇苹果的开发者文档(点击访问)

    详细的可以参考这篇文章一起阅读:《h5端呼起摄像头扫描二维码并解析》

    三角形的实现

    再看看文章开头的4个图案,你是不是又发现了这样一个规律?每个三角形都是“小家碧玉”的,它们没有内容
    既然如此,我们把上面这个彩色边框的矩形内容拿掉,看看会发生什么。

    JavaScript

    <style> .colored-border-empty-retangle { margin: 50px auto; border-top: 40px solid coral; border-right: 40px solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid mediumpurple; } </style> <div class="colored-border-empty-retangle"></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        .colored-border-empty-retangle {
            margin: 50px auto;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }
    </style>
    <div class="colored-border-empty-retangle"></div>

    呜,cool!左边和右边都是三角形了 耶!

    图片 16

    为什么上边和下边还是梯形呢?这是因为块级元素默认会在页面上水平平铺。 理解这一点,让上边和下边也变成三角形就简单了,将元素的width属性设为0:

    JavaScript

    <style> .colored-border-empty-retangle { margin: 50px auto; width: 0; height: 0; border-top: 40px solid coral; border-right: 40px solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid mediumpurple; } </style> <div class="colored-border-empty-retangle"></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
        .colored-border-empty-retangle {
            margin: 50px auto;
            width: 0;
            height: 0;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }
    </style>
    <div class="colored-border-empty-retangle"></div>

    现在上下左右4个边框都是三角形了。

    图片 17

    假设我们不要4个三角形,也不要让它们凑一块,我们就只要1个三角形,该如何做呢?
    将其他3个边框的颜色设为透明色:

    JavaScript

    <style> .triangle-top, .triangle-right, .triangle-bottom, .triangle-left { margin: 20px auto; width: 0; height: 0; border: 100px solid transparent; } .triangle-top { border-top-color: coral; } .triangle-right { border-right-color: lightblue; } .triangle-bottom { border-bottom-color: lightgreen; } .triangle-left { border-left-color: mediumpurple; } </style> <div class="triangle-top"></div> <div class="triangle-right"></div> <div class="triangle-bottom"></div> <div class="triangle-left"></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <style>
        .triangle-top,
        .triangle-right,
        .triangle-bottom,
        .triangle-left {
            margin: 20px auto;
            width: 0;
            height: 0;
            border: 100px solid transparent;
        }
        
        .triangle-top {
            border-top-color: coral;
        }
        
        .triangle-right {
            border-right-color: lightblue;
        }
        
        .triangle-bottom {
            border-bottom-color: lightgreen;
        }
        
        .triangle-left {
            border-left-color: mediumpurple;
        }
    </style>
    <div class="triangle-top"></div>
    <div class="triangle-right"></div>
    <div class="triangle-bottom"></div>
    <div class="triangle-left"></div>

    图片 18

    2. 画线

    画线需要借助 touch event 来完成,也就是,当我们 touchstart 的时候,传入开始时的相对坐标,作为线的一端,当我们 touchmove 的时候,获得坐标,作为线的另一端,当我们 touchend 的时候,开始画线。

    这只是一个测试画线功能,具体的后面再进行修改。

    有两个函数,获得当前 touch 的相对坐标:

    getTouchPos: function(e){ // 获得触摸点的相对位置 var rect = e.target.getBoundingClientRect(); var p = { // 相对坐标 x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top }; return p; }

    1
    2
    3
    4
    5
    6
    7
    8
    getTouchPos: function(e){ // 获得触摸点的相对位置
      var rect = e.target.getBoundingClientRect();
      var p = { // 相对坐标
        x: e.touches[0].clientX - rect.left,
        y: e.touches[0].clientY - rect.top
      };
      return p;
    }

    画线:

    drawLine: function(p1, p2){ // 画线 this.ctx.beginPath(); this.ctx.lineWidth = 3; this.ctx.moveTo(p1.x, p2.y); this.ctx.lineTo(p.x, p.y); this.ctx.stroke(); this.ctx.closePath(); },

    1
    2
    3
    4
    5
    6
    7
    8
    drawLine: function(p1, p2){ // 画线
      this.ctx.beginPath();
      this.ctx.lineWidth = 3;
      this.ctx.moveTo(p1.x, p2.y);
      this.ctx.lineTo(p.x, p.y);
      this.ctx.stroke();
      this.ctx.closePath();
    },

    然后就是监听 canvas 的 touchstarttouchmove、和 touchend 事件了。

    4.传递参数的解决方案

    在开发过程曾经遇到过这样的问题:

    很多个页面,比如说a-z。当我在a页面的时候,浏览器中的url会带有某些参数,当我在做完一系列的操作到达z页面。
    某天有个需求,用户在页面a的时候会带上一个参数,决定用户在z页面做完操作后页面最终跳向哪里。那么这个参数该怎么传递到z页面呢?

    第一种解决方案:

    a页面到z页面跳转的过程中,通过 GET 的方式在url中带上这个参数;

    这种方案是比较常规,也是比较不错的解决方案。但是需要在页面中的逻辑跳都加上需要的参数。这样工作量比较大,而且容易出现遗漏。不建议使用。

    第二种解决方案:

    使用html5新特性sessionStorage来解决问题。在a页面的时候,把新添加的需要传给z页面的参数放在sessionStorage中。在z页面直接从sessionStorage中取需要获取的参数值,然后决定页面最终的跳转。

    这样解决问题不仅减少了很大的工作量,也解决了工作量大会遗漏的问题。

    sessionStorage的优点:

    因为数据是存储在内存中,当会话结束,页面关闭以后这些数据就会被销毁。

    html5移动端存储的一些坑:

    当然在移动端浏览器中使用localStoragesessionStorage是没有任何问题的。但是在安卓webview中却出现了localStorage无法向移动的磁盘写数据的问题。最后通过网络搜索发现。在安卓上webview是默认不开启localStorage想磁盘写文件的权限的。所以如果需要使用localStorage的同学需要找客户端支持。详细信息如下:

    图片 19

    图案实现

    知道了三角形的实现方法,那么下面4个图案实现起来就小Case了。

    图片 20

    这4个图案分别是:旗帜,向右的双实心箭头,气泡和丝带。

    View Demo

    为了便于这几种图案的演示,我们先设定以下基础共通的样式

    CSS

    * { font-family: simhei, sans-serif; box-sizing: border-box; } html { font-size: 62.5%; } body { background-color: lightblue; } div { margin: 20px auto; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    * {
        font-family: simhei, sans-serif;
        box-sizing: border-box;
    }
     
    html {
        font-size: 62.5%;
    }
     
    body {
        background-color: lightblue;
    }
     
    div {
        margin: 20px auto;
    }

    3. 画折线

    所谓的画折线,就是,将已经触摸到的点连起来,可以把它看作是画折线。

    首先,要用两个数组,一个数组用于已经 touch 过的点,另一个数组用于存储未 touch 的点,然后在 move 监听时候,对 touch 的相对位置进行判断,如果触到点,就把该点从未 touch 移到 touch 中,然后,画折线,思路也很简单。

    JavaScript

    drawLine: function(p){ // 画折线 this.ctx.beginPath(); this.ctx.lineWidth = 3; this.ctx.moveTo(this.touchCircles[0].x, this.touchCircles[0].y); for (var i = 1 ; i < this.touchCircles.length ; i++) { this.ctx.lineTo(this.touchCircles[i].x, this.touchCircles[i].y); } this.ctx.lineTo(p.x, p.y); this.ctx.stroke(); this.ctx.closePath(); },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    drawLine: function(p){ // 画折线
      this.ctx.beginPath();
      this.ctx.lineWidth = 3;
      this.ctx.moveTo(this.touchCircles[0].x, this.touchCircles[0].y);
      for (var i = 1 ; i < this.touchCircles.length ; i++) {
        this.ctx.lineTo(this.touchCircles[i].x, this.touchCircles[i].y);
      }
      this.ctx.lineTo(p.x, p.y);
      this.ctx.stroke();
      this.ctx.closePath();
    },

    JavaScript

    judgePos: function(p){ // 判断 触点 是否在 circle 內 for(var i = 0; i < this.restCircles.length; i++){ temp = this.restCircles[i]; if(Math.abs(p.x - temp.x) < r && Math.abs(p.y - temp.y) < r){ this.touchCircles.push(temp); this.restCircles.splice(i, 1); this.touchFlag = true; break; } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    judgePos: function(p){ // 判断 触点 是否在 circle 內
      for(var i = 0; i < this.restCircles.length; i++){
        temp = this.restCircles[i];
        if(Math.abs(p.x - temp.x) < r && Math.abs(p.y - temp.y) < r){
          this.touchCircles.push(temp);
          this.restCircles.splice(i, 1);
          this.touchFlag = true;
          break;
        }
      }
    }

    5.pc端js生成二维码

    做过一个JavaScript生成二维码的需求。当时调研了两个方案:

    1. 使用qrcodejs
    2. 使用jquery.qrcide

    在使用的过程中还是遇到一些坑,总结如下:

    图片 21

    所以在前端有需求做生成二维码需求的时候,可以参考以上的两个点,确定自己选择哪个开源库更适合自己的项目。

    实现旗帜

    旗帜图案是下半部分被啃掉了一口的长方形,这一口是个三角形。

    图片 22
    根据以上知识,我们很自然地就能想到实现方法,将border-bottom的颜色设置为透明的。

    CSS

    .flag { width: 0; height: 0; border: 2rem solid #FF6600; border-top-width: 4rem; border-bottom-color: transparent; border-bottom-width: 2rem; }

    1
    2
    3
    4
    5
    6
    7
    8
    .flag {
        width: 0;
        height: 0;
        border: 2rem solid #FF6600;
        border-top-width: 4rem;
        border-bottom-color: transparent;
        border-bottom-width: 2rem;
    }

    4. 标记已画

    前面已经说了,我们把已经 touch 的点(圆)放到数组中,这个时候需要将这些已经 touch 的点给标记一下,在圆心处画一个小实心圆:

    JavaScript

    drawPoints: function(){ for (var i = 0 ; i < this.touchCircles.length ; i++) { this.ctx.fillStyle = '#FFFFFF'; this.ctx.beginPath(); this.ctx.arc(this.touchCircles[i].x, this.touchCircles[i].y, this.r / 2, 0, Math.PI * 2, true); this.ctx.closePath(); this.ctx.fill(); } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    drawPoints: function(){
      for (var i = 0 ; i < this.touchCircles.length ; i++) {
        this.ctx.fillStyle = '#FFFFFF';
        this.ctx.beginPath();
        this.ctx.arc(this.touchCircles[i].x, this.touchCircles[i].y, this.r / 2, 0, Math.PI * 2, true);
        this.ctx.closePath();
        this.ctx.fill();
      }
    }

    同时添加一个 reset 函数,当 touchend 的时候调用,400ms 调用 reset 重置 canvas。

    到现在为止,一个 H5 手势解锁的简易版已经基本完成。

    6.本地存储js字符串

    当看到题目的时候,可能会“一脸蒙逼”为什么要在本地存储js字符串啊。好吧,有时候业务场景的需求确实是比较变态,且看我描述的一个业务场景。

    业务场景:
    因为历史的原因,我们的html5页面是跑在客户端的webview中,但是客户端的titlebar上的那个返回按钮却是调用了前端js的back方法进行页面返回的。这个时候就会出现一个问题,如果在我们的h5页面中跳出了我们自己的页面,到了第三方的页面。第三方页面的js肯定是没有我们客户端返回按钮需要的js返回方法的。

    可能有人会说,“卧槽,为什么要这么搞,当初谁这么设计的。。。”或者是“让客户端同学发版,用客户端自己的返回不就解决问题了么”。

    好吧,都说了是历史原因了其它的都不要说,而且找客户端同学发版也不太现实的情况下只能想其它的解决方案了。

    之前已经聊到过html5的客户端存储技术sessionStorage。当然我要做的就是把那段前端的back方法存到sessionStorage中。当加载第三方的页面的时候直接从sessionStorage中读取back方法的字符串,转化为js代码,并且赋值给客户端调用的方法。

    其实这里的难点是怎么把js字符串转化为可执行的js代码。

    1. 使用eval执行js代码语句,看下面简单的示例:

    图片 23

    由上面的代码可以知道,eval可以把简单的js字符串转化为js代码并且执行它。但是当我们的js字符串比较复杂呢?比如下面这样:

    JavaScript

    function aaa(){ console.log(1); }

    1
    2
    3
    function aaa(){
        console.log(1);
    }

    那么使用eval函数还行不行呢?看下面的示例:
    图片 24

    由上面的执行结果可以知道,不管怎么执行都得不到我们的预期的结果,但是有没有办法得到我们预期的结果呢?答案是:有。

    1. JavaScript中new 关键字的使用

    在JavaScript中一切皆是对象。当我们创建一个函数的时候除了函数声明和函数表达式外,还可以通过new Function的方式来创建函数(这种方式并不常用,但是特殊的场景还是很有用的)。

    那么使用new Function怎么解决上面的问题呢?请看示例代码:

    图片 25

    由上面的示例代码和c的执行结果我想很多人已经知道怎么做了,其实只需要对b的字符串函数做一下简单的修改即可,看代码:

    图片 26

    上面的代码执行结果的b()就是我们我想要的保存的函数体。

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:手势解锁,三角形运用

    关键词:

上一篇:常见的2D碰撞检测,一起理解

下一篇:没有了