爱心背景特效

2019-12-05 13:09栏目:龙电竞官网
TAG:

用 canvas 达成 Web 手势解锁

2017/04/04 · HTML5 · Canvas

原来的小说出处: songjz   

近期在座 360 暑假的前端星安顿,有八个在线作业,停止日期是 3 月 30 号,让手动达成一个 H5 手势解锁,具体的功效仿佛原新手提式有线电话机的九宫格解锁那样。

龙电竞官网 1

贯彻的末段效果就疑似上边那张图那样:

龙电竞官网 2

大旨供给是那般的:将密码保存到 localStorage 里,开首的时候会从当地读取密码,如果未有就让顾客设置密码,密码最少为七位数,少于八人要升迁错误。须要对第叁遍输入的密码实行认证,三回相似工夫维持,然后是印证密码,能够对客商输入的密码实行求证。

HTML5兑现显示屏手势解锁

2015/07/18 · HTML5 · 1 评论 · 手势解锁

原稿出处: AlloyTeam   

效果呈现

龙电竞官网 3

贯彻原理 利用HTML5的canvas,将解锁的层面划出,利用touch事件解锁那几个规模,直接看代码。

JavaScript

function createCircle(卡塔尔(英语:State of Qatar) {// 创造解锁点的坐标,依据canvas的分寸来平均分配半径 var n = chooseType;// 画出n*n的矩阵 lastPoint = []; arr = []; restPoint = []; r = ctx.canvas.width / (2 + 4 * n卡塔尔;// 公式总结 半径和canvas的大小有关 for (var i = 0 ; i < n ; i++卡塔尔 { for (var j = 0 ; j < n ; j++卡塔尔国 { arr.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r }); restPoint.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r }); } } //return arr; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function createCircle() {// 创建解锁点的坐标,根据canvas的大小来平均分配半径
 
        var n = chooseType;// 画出n*n的矩阵
        lastPoint = [];
        arr = [];
        restPoint = [];
        r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关
        for (var i = 0 ; i < n ; i++) {
            for (var j = 0 ; j < n ; j++) {
                arr.push({
                    x: j * 4 * r + 3 * r,
                    y: i * 4 * r + 3 * r
                });
                restPoint.push({
                    x: j * 4 * r + 3 * r,
                    y: i * 4 * r + 3 * r
                });
            }
        }
        //return arr;
    }

canvas里的圈子画好之后方可拓宽事件绑定

龙电竞官网,JavaScript

function bindEvent() { can.addEventListener("touchstart", function (e) { var po = getPosition(e); console.log(po); for (var i = 0 ; i < arr.length ; i++) { if (Math.abs(po.x - arr[i].x) < r && Math.abs(po.y - arr[i].y卡塔尔(قطر‎ < r卡塔尔(英语:State of Qatar) { // 用来判断开始点是或不是在规模内部 touchFlag = true; drawPoint(arr[i].x,arr[i].y); lastPoint.push(arr[i]); restPoint.splice(i,1); break; } } }, false); can.addEventListener("touchmove", function (e) { if (touchFlag) { update(getPosition(e)); } }, false); can.addEventListener("touchend", function (e) { if (touchFlag) { touchFlag = false; storePass(lastPoint); setTimeout(function(){ init(); }, 300); } }, false); }

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
32
function bindEvent() {
        can.addEventListener("touchstart", function (e) {
             var po = getPosition(e);
             console.log(po);
             for (var i = 0 ; i < arr.length ; i++) {
                if (Math.abs(po.x - arr[i].x) < r && Math.abs(po.y - arr[i].y) < r) { // 用来判断起始点是否在圈圈内部
 
                    touchFlag = true;
                    drawPoint(arr[i].x,arr[i].y);
                    lastPoint.push(arr[i]);
                    restPoint.splice(i,1);
                    break;
                }
             }
         }, false);
         can.addEventListener("touchmove", function (e) {
            if (touchFlag) {
                update(getPosition(e));
            }
         }, false);
         can.addEventListener("touchend", function (e) {
             if (touchFlag) {
                 touchFlag = false;
                 storePass(lastPoint);
                 setTimeout(function(){
 
                    init();
                }, 300);
             }
 
         }, false);
    }

紧接着到了最注重的步调绘制解锁路径逻辑,通过touchmove事件的持续触发,调用canvas的moveTo方法和lineTo方法来画出折现,同期判别是不是到达大家所画的局面里面,个中lastPoint保存不易的层面路线,restPoint保存全体范围去除正确门路之后剩余的。 Update方法:

JavaScript

function update(po卡塔尔 {// 大旨转移形式在touchmove时候调用 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height卡塔尔(قطر‎; for (var i = 0 ; i < arr.length ; i++卡塔尔 { // 每帧先把面板画出来 drawCle(arr[i].x, arr[i].y卡塔尔国; } drawPoint(lastPoint卡塔尔(英语:State of Qatar);// 每帧花轨迹 drawLine(po , lastPoint卡塔尔(英语:State of Qatar);// 每帧画圆心 for (var i = 0 ; i < restPoint.length ; i++卡塔尔(قطر‎{ if (Math.abs(po.x - restPoint[i].x) < r && Math.abs(po.y - restPoint[i].y) < r) { drawPoint(restPoint[i].x, restPoint[i].y); lastPoint.push(restPoint[i]); restPoint.splice(i, 1); break; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function update(po) {// 核心变换方法在touchmove时候调用
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
        for (var i = 0 ; i < arr.length ; i++) { // 每帧先把面板画出来
            drawCle(arr[i].x, arr[i].y);
        }
 
        drawPoint(lastPoint);// 每帧花轨迹
        drawLine(po , lastPoint);// 每帧画圆心
 
        for (var i = 0 ; i < restPoint.length ; i++) {
            if (Math.abs(po.x - restPoint[i].x) < r && Math.abs(po.y - restPoint[i].y) < r) {
                drawPoint(restPoint[i].x, restPoint[i].y);
                lastPoint.push(restPoint[i]);
                restPoint.splice(i, 1);
                break;
            }
        }
 
    }

最后正是停止职业,把渠道里面包车型地铁lastPoint保存的数组造成密码存在localstorage里面,之后就用来拍卖解锁验证逻辑了

JavaScript

function storePass(psw卡塔尔 {// touchend停止之后对密码和气象的拍卖 if (pswObj.step == 1卡塔尔 { if (checkPass(pswObj.fpassword, psw卡塔尔国卡塔尔 { pswObj.step = 2; pswObj.spassword = psw; document.getElementById('title'卡塔尔.innerHTML = '密码保存成功'; drawStatusPoint('#2CFF26'卡塔尔(قطر‎; window.localStorage.setItem('passwordx', JSON.stringify(pswObj.spassword卡塔尔(英语:State of Qatar)卡塔尔(英语:State of Qatar); window.localStorage.setItem('chooseType', chooseType卡塔尔国; } else { document.getElementById('title'卡塔尔国.innerHTML = '一次不相像,重新输入'; drawStatusPoint('red'卡塔尔; delete pswObj.step; } } else if (pswObj.step == 2卡塔尔国 { if (checkPass(pswObj.spassword, psw卡塔尔国卡塔尔(英语:State of Qatar) { document.getElementById('title'卡塔尔.innerHTML = '解锁成功'; drawStatusPoint('#2CFF26'卡塔尔(قطر‎; } else { drawStatusPoint('red'卡塔尔; document.getElementById('title'卡塔尔国.innerHTML = '解锁退步'; } } else { pswObj.step = 1; pswObj.fpassword = psw; document.getElementById('title'卡塔尔(قطر‎.innerHTML = '再一次输入'; } }

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
function storePass(psw) {// touchend结束之后对密码和状态的处理
        if (pswObj.step == 1) {
            if (checkPass(pswObj.fpassword, psw)) {
                pswObj.step = 2;
                pswObj.spassword = psw;
                document.getElementById('title').innerHTML = '密码保存成功';
                drawStatusPoint('#2CFF26');
                window.localStorage.setItem('passwordx', JSON.stringify(pswObj.spassword));
                window.localStorage.setItem('chooseType', chooseType);
            } else {
                document.getElementById('title').innerHTML = '两次不一致,重新输入';
                drawStatusPoint('red');
                delete pswObj.step;
            }
        } else if (pswObj.step == 2) {
            if (checkPass(pswObj.spassword, psw)) {
                document.getElementById('title').innerHTML = '解锁成功';
                drawStatusPoint('#2CFF26');
            } else {
                drawStatusPoint('red');
                document.getElementById('title').innerHTML = '解锁失败';
            }
        } else {
            pswObj.step = 1;
            pswObj.fpassword = psw;
            document.getElementById('title').innerHTML = '再次输入';
        }
 
    }

解锁组件

将这一个HTML5解锁写成了一个构件,放在

二维码体验: 龙电竞官网 4

 

仿照效法资料:

1 赞 4 收藏 1 评论

龙电竞官网 5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Valentine's Day everyone !</title>
</head>
<style>
body{
overflow: hidden;
margin: 0;
}
h1{
position: fixed;
top: 50%;
left: 0;
width: 100%;
text-align: center;
transform:translateY(-50%);
font-family: 'Love Ya Like A Sister', cursive;
font-size: 40px;
color: #c70012;
padding: 0 20px;
}
@media (min-width:1200px){
h1{
font-size: 60px;
}
}
</style>
<body>
<canvas></canvas>
<h1>canvas heart</h1>

H5 手势解锁

扫码在线查看:

龙电竞官网 6

抑或点击查看手机版。

项目 GitHub 地址,H5HandLock。

首先,小编要证美素佳儿(Friso卡塔尔(英语:State of Qatar)下,对于那几个项目,小编是参考外人的,H5lock。

自家感到一个相比较合理的解法应该是利用 canvas 来促成,不知情有未有大神用 css 来达成。若是纯用 css 的话,能够将连线先安装 display: none,当手指划过的时候,展现出来。光设置这个本该就丰富麻烦呢。

在此之前精晓过 canvas,但不曾真正的写过,下边就来介绍笔者近日学习 canvas 并促成 H5 手势解锁的经过。

<script>
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");

有备无患及布局设置

自身那边用了两个相比符合规律的做法:

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

var ww,wh;

canvas

function onResize(){
ww = canvas.width = window.innerWidth;
wh = canvas.height = window.innerHeight;
}
ctx.strokeStyle = "red";
ctx.shadowBlur = 25;
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
var precision = 100;
var hearts = [];
var mouseMoved = false;
function onMove(e){
mouseMoved = true;
if(e.type === "touchmove"){
hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
}
else{
hearts.push(new Heart(e.clientX, e.clientY));
hearts.push(new Heart(e.clientX, e.clientY));
}
}
var Heart = function(x,y){
this.x = x || Math.random()*ww;
this.y = y || Math.random()*wh;
this.size = Math.random()*2 + 1;
this.shadowBlur = Math.random() * 10;
this.speedX = (Math.random()+0.2-0.6) * 8;
this.speedY = (Math.random()+0.2-0.6) * 8;
this.speedSize = Math.random()*0.05 + 0.01;
this.opacity = 1;
this.vertices = [];
for (var i = 0; i < precision; i++) {
var step = (i / precision - 0.5) * (Math.PI * 2);
var vector = {
x : (15 * Math.pow(Math.sin(step), 3)),
y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
}
this.vertices.push(vector);
}
}
Heart.prototype.draw = function(){
this.size -= this.speedSize;
this.x += this.speedX;
this.y += this.speedY;
ctx.save();
ctx.translate(-1000,this.y);
ctx.scale(this.size, this.size);
ctx.beginPath();
for (var i = 0; i < precision; i++) {
var vector = this.vertices[i];
ctx.lineTo(vector.x, vector.y);
}
ctx.globalAlpha = this.size;
ctx.shadowBlur = Math.round((3 - this.size) * 10);
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
ctx.shadowOffsetX = this.x + 1000;
ctx.globalCompositeOperation = "screen"
ctx.closePath();
ctx.fill()
ctx.restore();
};

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卡塔尔(英语:State of Qatar); // 为了防止再度画 this.circles.forEach(function(v卡塔尔(英语:State of Qatar){ drawCircle(ctx, v.x, v.y卡塔尔国; // 画每一个圆 }卡塔尔(英语:State of Qatar) }, drawCircle: function(ctx, x, y卡塔尔(英语:State of Qatar){ // 画圆函数 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

function render(a){
requestAnimationFrame(render);

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

hearts.push(new Heart())
ctx.clearRect(0,0,ww,wh);
for (var i = 0; i < hearts.length; i++) {
hearts[i].draw();
if(hearts[i].size <= 0){
hearts.splice(i,1);
i--;
}
}
}
onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);
</script>
</body>
</html>

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. 标志已画

后边已经说了,我们把早就 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 手势解锁的简易版已经基本到位。

版权声明:本文由龙竞技官网发布于龙电竞官网,转载请注明出处:爱心背景特效