canvas手势解锁思路

最新推荐文章于 2024-04-24 09:40:43 发布
最新推荐文章于 2024-04-24 09:40:43 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 我的项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuidinaozhongyan/article/details/71705414
版权

参考：http://web.jobbole.com/90970/

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

具体思路如下：

一：新建画布，指定宽度，每行排列3个圆，计算圆的半径，根据半径确定圆心。用arc（x,y,r,0,2*PI,true）函数画圆；

二：初始化密码，如果window.localStorage.getItem("HandLock")存在密码，则切换到model=1,验证密码；否则为{model:2}，设置密码；

三：监听touchstart事件，touchmove事件，touchend事件

touchstart事件:获取触点的相对位置，清空touchedCircle数组，判断触点是否在圆内，若在添加在touchedCircle数组中，同时从restCirle数组中删除，每次是对restCirle数组进行
遍历，防止重复添加，然后设置touchFlag和redraw为true。

touchmove事件（添加节流函数）：通过一个变量保存触点位置，判断触点的touchFlag属性，如果为true则：如果touchedCircle的长度大于等于1，则圆心与触点连线&
最低0.47元/天 解锁文章
初漾
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
自己动手做一个--手势解锁
yuchong的专栏
02-24 2167
手势解锁在Android手机上算是很普遍的了,在网上也有很多大牛做的很完美, 但还是想自己琢磨着做一遍~~ 首先分析一下: 手势解锁其实就相当于 就是1~9的不同排列方式,根密码差不多,但不同的是,这个密码是数字不重复的,一个数字只能出现一次. 在这里我们暂且就把9个圆形编个号,就横向排列1~9号 分析过小米手势解锁的就会发现: 如图: 如果密码是1-7-4 ,事实
h5使用canvas画布实现手势解锁
11-30
前言 最近做的一个app项目使用的 apicloud 来实现跨平台开发，现在需要为这个 app 添加手势（九宫格）解锁的功能，apicloud 已经有一些第三方的原生实现的手势解锁插件，因为是原生的性能也比较好，调用也比较方便，但是都不能对它们的样式做修改，所以就打算自己来实现这个功能。这篇文章将实现过程整理分享出来，希望有需要的可以了解。分享出来的代码只实现了最基本的 设置密码功能 、 解锁功能 、 比较密码 的功能等，一些高级功能例如:不能限制一个点最多经过多少次、限制用户设置密码的长度。 原生实现还是其它方式实现？ 1、使用 android 和 ios 对应的平台通过原生代码来写手势解
canvas 实现vue 手势解锁组件
weixin_34184561的博客
11-29 552
1.手机锁屏九宫格解锁组件 2.代码如下 <template> <canvas id="gesture" ref="canvas" :style="style" /> </template> <script> export default { name: 'GestureLock', props: { cho...
推荐开源项目：H5HandLock - 手势解锁的HTML5实现
最新发布
gitblog_00084的博客
04-24 345
推荐开源项目：H5HandLock - 手势解锁的HTML5实现 项目地址:https://gitcode.com/songjinzhong/H5HandLock 项目简介 H5HandLock 是一个基于HTML5、CSS3和JavaScript实现的轻量级手势解锁组件。该项目由宋金钟开发，旨在为Web应用提供一种与原生应用类似的用户体验，让用户通过自定义手势进行安全解锁或授权。 技术分析 HT...
手势解锁-canvas-javascript实战
01-23
掌握canvas基本用法;掌握手势解锁实现原理;得到注释详尽的源码;掌握canvas的学习方法
用 canvas 实现 Web 手势解锁
sinat_36947685的博客
04-05 921
实现的最终效果就像下面这张图这样：   基本要求是这样的：将密码保存到 localStorage 里，开始的时候会从本地读取密码，如果没有就让用户设置密码，密码最少为五位数，少于五位要提示错误。需要对第一次输入的密码进行验证，两次一样才能保持，然后是验证密码，能够对用户输入的密码进行验证。 H5 手势解锁 准备及布局设置 我这里用了一个比较常规的做法： (fun
canvas实现一个解锁demo
onepunchmen00的博客
11-21 1124
问题1： 代码如下： function Foo() {}; Foo.prototype.talk = function () { alert('hello~\n'); }; var a = new Foo; a.talk(); // 输出'hello~\n' 但是如果这样： Foo.talk() // 报错：Object doesn't support pr
html5 canvas手势解锁源码分享
11-21
先放图 ... <!...<...meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no...手势解锁</title> <style type="text/css"> body{ text-align: center; background: #
canvas移动端手势解锁
06-01
【canvas移动端手势解锁】是一种常见的用户验证方法，尤其在移动设备上被广泛应用，因为它提供了直观且个性化的交互体验。这个项目是基于JavaScript的canvas元素来实现的，利用了canvas强大的图形绘制能力，允许用户...
手势密码（四）
全干工程师
09-15 4369
之前写过3篇手势密码的demo,不过没有集成到真实的企业项目中，这几天正好领到一个手势密码项目，昨天刚好弄完，今天抽空整理下，目前还没有完善，有一些地方需要更改，不过基本的流程都可以跑通了 源码下载地址。。。。。 先看主界面的入口把、里面有2个button(一个是设置手势密码、一个是校验手势密码) activity_main.xml <RelativeLayou
Vue2手势解锁密码支付宝手势解锁
08-12
Vue2 手势解锁密码 / 支付宝手势解锁
JQuery手势密码
01-16 1778
随着技术的更新，很多人都会头疼，又是手势密码，又是人脸识别= =。。。学海无涯苦作舟啊……手势密码，顾名思义，需要的是canvas的技术，在这里，我把需要用到的js已经上传到资源里面：http://download.csdn.net/detail/zhaohaixin0418/9738860，下载，引入页面。然后在页面写如下即可：（可根据项目需求去改js代码，正确的密码是一个字母“Z”） d
Vue2 手势解锁密码 / 支付宝手势解锁
Guntertien的博客
07-12 2527
Vue2 手势解锁密码 / 支付宝手势解锁 项目名称： vue-Lock   Github地址：https://github.com/guntertien/vue-lock
手机九宫格滑动解锁方法种数（389112种）
Dikea's Blog
10-13 4565
有妹子问手机滑动解锁多少种方案，于是写了个记忆化搜索得出答案，也是有趣。 #include #include #include #include #include using namespace std; #define N 4 int vis[N][N]; bool check(int x1, int y1, int x2, int y2) { if(abs(x1 -
手机九宫格解锁所有可能
人面桃花
04-05 6876
#include <stdio.h> #include <string.h> int filter[10][10]; //用于存放是否适合连接 int stamp[9]; //用于存放上一次连的是哪个数字 bool vis[10]; //用于标记是否已经用过 int result; //用于输出最后的结果 void dfs(int cou
解决图案解锁问题
?疯啦
01-29 2025
1、输入错误次数超过5次后，倒计时到1秒停留时间太长 2、有时无30S提示输入界面会出现几次可输入的情况 3、锁屏界面画错5次图案，点按提示框中的OK后，界面倒计时显示 剩余解锁秒数，按键锁屏半分钟后唤醒，界面还是显示之前锁屏时的秒数 4、锁屏界面画错5次图案，点按提示框中的OK后，有时无30s倒计时提示只显示wrong pattern，立刻可以继续进行解锁操作 碰到这类情况的基本上是在r
使用Jquery 来模仿手势解锁密码特效
weixin_30493321的博客
08-14 154
效果预览图： 验证成功：（可以进行页面挑战等...） 验证失败： HTML： 1 <div id="gesturepwd" style="position: absolute;width:440px;height:440px;left:50%;top:50%; 2 margin-left:-220px;margin-top:-220px"></d...
uniapp canvas 手势缩放
06-08
在uniapp中使用canvas实现手势缩放可以通过以下步骤实现： 1. 在canvas的绘制方法中获取手势事件的信息，包括手势类型、起始点、移动距离等信息。 2. 在手势的处理方法中计算缩放比例，并根据缩放比例对canvas进行缩放。 下面是一个简单的示例代码： ```html <template> <canvas @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" style="width: 100%; height: 100%;" ></canvas> </template> <script> export default { methods: { touchStart(event) { if (event.touches.length === 2) { // 计算两个手指之间的距离 this.distance = Math.sqrt( (event.touches[0].clientX - event.touches[1].clientX) ** 2 + (event.touches[0].clientY - event.touches[1].clientY) ** 2 ); } }, touchMove(event) { if (event.touches.length === 2) { // 计算当前两个手指之间的距离 const currentDistance = Math.sqrt( (event.touches[0].clientX - event.touches[1].clientX) ** 2 + (event.touches[0].clientY - event.touches[1].clientY) ** 2 ); // 计算缩放比例 const scale = currentDistance / this.distance; // 更新缩放比例 this.scale *= scale; // 更新起始点 this.startX = (this.startX + event.touches[0].clientX) / 2; this.startY = (this.startY + event.touches[0].clientY) / 2; // 重新绘制canvas this.draw(); } }, touchEnd() { // 清空手势信息 this.distance = 0; }, draw() { // 获取canvas对象 const ctx = uni.createCanvasContext("myCanvas", this); // 缩放canvas ctx.scale(this.scale, this.scale); // 绘制图形 ctx.fillRect(this.startX, this.startY, 100, 100); // 显示canvas ctx.draw(); }, }, data() { return { startX: 0, // 起始点的x坐标 startY: 0, // 起始点的y坐标 scale: 1, // 缩放比例 distance: 0, // 两个手指之间的距离 }; }, mounted() { // 绘制canvas this.draw(); }, }; </script> ``` 在上面的示例代码中，我们使用了uniapp提供的canvas API，通过scale方法实现缩放。在touchMove方法中，根据当前两个手指之间的距离计算缩放比例，并更新缩放比例和起始点的坐标。最后，在draw方法中调用scale方法对canvas进行缩放，然后绘制图形并显示canvas。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值