xml地图|网站地图|网站标签 [设为首页] [加入收藏]
手势解锁,7个有用的HTML5学习资源
分类:web前端

用 canvas 实现 Web 手势解锁

2017/04/04 · HTML5 · Canvas

原文出处: songjz   

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

图片 1

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

图片 2

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

H5推广:你该知道的一些事儿

2017/03/11 · HTML5 · 2 评论 · HTML5

原文出处: 携程设计委员会   

7个有用的HTML5学习资源

2011/01/18 · HTML5 · HTML5

虽然HTML5还是很新,没有被所有主要浏览器支持,但现在还是有许多设计师和开发人员使用。毫无疑问,几年下来,HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它,但也有许多人还没有接触过HTML5。为了帮助学习这个任务,我们收集了7个有用的HTML5学习资源

  一、HTML5开发者指南

这个文档举例说明了如何编写HTML5文档,为初学者提供了简单和可实践的应用程序,也为高级开发人员提供了更深度的信息。

  二、WHATWG博客

图片 3

  WHATWG博客是网络超文本应用技术工作小组(Web Hypertext Application Technology Working Group)的博客,就是负责HTML5规格的那群人。

  三、Dive Into HTML 5(钻研HTML5)

图片 4

  Dive Into HTML 5是从HTML5规格和其他标准中精心挑选并详述其特征的一本书。

  四、HTML5医生

图片 5

  HTML5医生发表了许多文章,都是关于HTML5及其语义、及如何正确使用它的。他们也通过”询问医生”收集了很多问题,并在文章中予以回答,所有人都可从中受益。

  五、When can I use

图片 6

  这是一个以表格制成的备忘单形式的单页面,描述了HTML5、CSS3、SVG及其他未来网络技术的特征。

  六、HTML5可视备忘单

图片 7

  这个备忘单就是一个简单的可视网格,包含了所有HTML5标签和相关的属性。

  七、HTML5画廊

图片 8

  HTML5画廊有两个主要目标,一个是展示用HTML5布局的网站,我们可以从中看到别人如何理解HTML5规格和如何应用它。第二是帮助学习HTML5、如何使用HTML5及如何应用HTML5。

原文:webdesignledger  译文:龙南客

 

赞 收藏 评论

图片 9

H5 手势解锁

扫码在线查看:

图片 10

或者点击查看手机版。

项目 GitHub 地址,H5HandLock。

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

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

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

1. H5已死?

经过几年H5的混战,大家对H5的感觉越来越习以为常,曾经名噪一时的套路当下也难故伎重演。于是“H5已死”的论调一时间甚嚣尘上。

如今到了2017年,H5究竟死不死?在这里先和大家分享一份2017年初H5在线创作平台MAKA发布的《2016年度H5数据报告》[1]。

报告中指出,2016年带商业转化功能的H5从2015年的15%左右攀升至45.5%,翻了三倍之多;2015年的H5以纯内容展示为主,通过H5的趣味性传播带来品牌曝光,而2016年的H5正从单一的展示传播转变为更实际的商业用途。

在H5商业转化方面,最常用功能是报名表单(15.6%)、地图功能(4.3%)、接力功能(2.7%)、投票功能(1.1%)、抽奖功能(0.6%)。

图片 11

同时,在MAKA上,H5平均页面浏览量1208,高于去年的954,同比增26.6%。这个数据和微信30%月活跃用户增长速度相近似。
从以上数据来看,“H5已死”的论调可能还为时过早。

准备及布局设置

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

(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 的话,懒得去新建文件了,就直接內联了。

2. 2016:H5的活法

既然H5还没死,那么现在的H5的传播数据到底怎样呢?我们继续看MAKA的这份报告。

canvas

1- 受众地域分布

从数据来看,受众多数来自一线城市,北上广深四个城市是H5访问的主要来源地,这与H5想要接触的目标人群是一致的。其中北京遥遥领先,重庆、成都紧随北上广深。

图片 12

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

2- H5访问时间

用户访问高峰集中在午休11:00-14:00和晚上20:00-23:00,与微信公众号的阅读时间分布曲线相近似。具体的推广时间需要结合具体场景,而H5发布的最佳时机由此可见一斑。

图片 13

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 事件了。

3- H5渠道排行

从MAKA平台H5的阅读来源分析,59.6%的用户通过朋友圈进入H5,与2015年相比下降了6个百分点,这个转变可能与微信限制诱导分享有关。此消彼长,从微信公众号浏览量增加7.9%,公众号来源逐渐成为成为一次传播的主要战场。

图片 14

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;
    }
  }
}

4- H5阅读页数分析

通过对访问量最高的1000个H5分析,发现高访问量的H5页数多集中在6-10页,其中9页最多,占比高达21.0%。用户向来是非常挑剔的,太过复杂或者异常的操作会导致用户流失。早在2015年就有分析指出[2],H5层级越深流失率也越大。既要保证传播的内容,也要减少用户流失,6-10页的H5是比较合适的。

图片 15

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 手势解锁的简易版已经基本完成。

5- 最受欢迎的H5形式

H5小游戏曾在朋友圈风靡一时。而2016年刷屏的H5小游戏就没有那么多了,这与微信对诱导分享H5严控有直接关系。1000个高访问量的H5中,以故事营销为主题的H5作品最受用户亲睐,其中包括品牌故事、人生哲学等鸡汤软文的形式展现。内容仍是王道,好的内容更容易被用户接受。

图片 16

password

为了要实现记住和重置密码的功能,把 password 保存在 localStorage 中,但首先要添加必要的 html 和样式。

3. 运营目标与受众需求

在设计一个H5之前,首先要明确的是我们的运营目标和受众需求。运营目标会依据最终目的有所不同,针对的受众也有可能因为运营目标不同而发生变化。成功的运营应当是通过满足受众的某种需求,最终实现运营目的。过多倾向于用户,会导致PV上升而CV低迷;过多倾向于运营推广而忽略受众需求,会失去流量最终也达不到目标。

图片 17

举一个反例,曾一度刷爆朋友圈的著名H5《吴亦凡要入伍》,其通过视频展示的方式很有创意,吴亦凡的帅气形象也深得很多粉丝的心。然而这真的是一支成功的H5吗?如果没有特别注意,很容易误认为这个H5主要是为腾讯新闻做宣传。因为除了腾讯新闻的标题以外,H5的宣传目标“全民突击”游戏名只出现在了结束页的左上角,以及吴亦凡视频的口头描述中。虽然满足了受众(粉丝们)欣赏偶像的需求,可是宣传推广“全民突击”的运营需求却没有真正完成。

图片 18

长按下方二维码打开H5

图片 19

总的来说一款H5产品是需要仔细打磨的,但大部分失败的制作者期望高、投入少、时间急还不动脑,想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处,唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

 

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:手势解锁,7个有用的HTML5学习资源

上一篇:基本形状转换那些事,游戏开发基础的教程 下一篇:没有了
猜你喜欢
热门排行
精彩图文