2. 程式人生 > >手勢密碼的h5實現參考

手勢密碼的h5實現參考

阿新 • • 發佈：2019-02-20
var R = 26, CW = 400, CH = 320, OffsetX = 30, OffsetY = 30; function CaculateNinePointLotion(diffX, diffY) { var Re = []; for (var row = 0; row < 3; row++) { for (var col = 0; col < 3; col++) { var Point = { X: (OffsetX + col * diffX + ( col * 2
+ 1) * R), Y: (OffsetY + row * diffY + (row * 2 + 1) * R) }; Re.push(Point); } } return Re; } var PointLocationArr = []; window.onload = function () { var c = document.getElementById("myCanvas"
); CW = document.body.offsetWidth; c.width = CW; c.height = CH; var cxt = c.getContext("2d"); //兩個圓之間的外距離 就是說兩個圓心的距離去除兩個半徑 var X = (CW - 2 * OffsetX - R * 2 * 3) / 2; var Y = (CH - 2 * OffsetY - R * 2 * 3) / 2; PointLocationArr = CaculateNinePointLotion(X, Y); InitEvent(c, cxt); //CW=2*offsetX+R*2*3+2*X
Draw(cxt, PointLocationArr, [],null); } function Draw(cxt, _PointLocationArr, _LinePointArr,touchPoint) { if (_LinePointArr.length > 0) { cxt.beginPath(); for (var i = 0; i < _LinePointArr.length; i++) { var pointIndex = _LinePointArr[i]; cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y); } cxt.lineWidth = 10; cxt.strokeStyle = "#627eed"; cxt.stroke(); cxt.closePath(); if(touchPoint!=null) { var lastPointIndex=_LinePointArr[_LinePointArr.length-1]; var lastPoint=_PointLocationArr[lastPointIndex]; cxt.beginPath(); cxt.moveTo(lastPoint.X,lastPoint.Y); cxt.lineTo(touchPoint.X,touchPoint.Y); cxt.stroke(); cxt.closePath(); } } for (var i = 0; i < _PointLocationArr.length; i++) { var Point = _PointLocationArr[i]; cxt.fillStyle = "#627eed"; cxt.beginPath(); cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); cxt.fillStyle = "#ffffff"; cxt.beginPath(); cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); if(_LinePointArr.indexOf(i)>=0) { cxt.fillStyle = "#627eed"; cxt.beginPath(); cxt.arc(Point.X, Point.Y, R -16, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); } } } function IsPointSelect(touches,LinePoint) { for (var i = 0; i < PointLocationArr.length; i++) { var currentPoint = PointLocationArr[i]; var xdiff = Math.abs(currentPoint.X - touches.pageX); var ydiff = Math.abs(currentPoint.Y - touches.pageY); var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5); if (dir < R ) { if(LinePoint.indexOf(i) < 0){ LinePoint.push(i);} break; } } } function InitEvent(canvasContainer, cxt) { var LinePoint = []; canvasContainer.addEventListener("touchstart", function (e) { IsPointSelect(e.touches[0],LinePoint); }, false); canvasContainer.addEventListener("touchmove", function (e) { e.preventDefault(); var touches = e.touches[0]; IsPointSelect(touches,LinePoint); cxt.clearRect(0,0,CW,CH); Draw(cxt,PointLocationArr,LinePoint,{X:touches.pageX,Y:touches.pageY}); }, false); canvasContainer.addEventListener("touchend", function (e) { cxt.clearRect(0,0,CW,CH); Draw(cxt,PointLocationArr,LinePoint,null); alert("密碼結果是："+LinePoint.join("->")); LinePoint=[]; }, false); }

相關推薦

手勢密碼的h5實現參考

var R = 26, CW = 400, CH = 320, OffsetX = 30, OffsetY = 30; function CaculateNinePointLotion(diffX, diffY) { var Re = [];

Appium-實現手勢密碼登陸

xcod 服務器 from RF 屏幕 str CI web oca 前言： 前幾天有人問我，手勢登陸如何做？於是我找了一個APP試了試，所以本文來總結使用Python+Appium來實現手勢密碼登陸APP。 環境： MacOS：10.13.4 Appium-deskto

appium-手勢密碼實現

str oca 分享圖片 on() const 元素 style app .com 1. 紅色區域的範圍為：[66,575][1014,1523]， 由於這塊是一個整塊，所以無法使用每個點的數據；因此只能使用LockPatternView對象拿到左上角的坐標值

Android手勢密碼實現方案

一、大致介面介紹： 圖1 圖2 圖3 圖4 圖1：手勢密碼繪製介面 【主要是繪製上方的9個提示圖示和9個宮格密碼圖示】 圖2：設定手勢密碼 【監聽手勢的輸入，TouchEvent的事件處理，獲取輸入的手勢密碼，同時顯示在上方的提示區域】 圖3

利用ActivityLifecycleCallBack監控app前後臺狀態切換，實現手勢密碼即九宮格解鎖

轉載註明出處：http://blog.csdn.net/coderder/article/details/51063493 利用ActivityLifecycleCallbacks監控app前後臺狀態

校驗密碼強度的參考代碼

ron system rgs print () ring else i++ strong 　　public static void main(String[] args) throws Exception { String str = "WERUIuy%^

H5實現的手機搖一搖

復制 計算 motion listener col 進行 們的 奇怪 ast 原文：http://www.open-open.com/code/view/1430809715273 <!DOCTYPE html> <html lan

echarts2.*版本tree樹圖點擊節點加載數據（或點擊節點收縮）實現參考

節點 tree echarts 自上一篇說明的點擊節點更換節點圖標後，發現網上有許多關於點擊節點加載數據（或點擊收縮節點）的問題，一直沒看到滿意的解答。現在在上一篇的基礎上做出如下實現：點擊節點動態加載/收縮子節點。廢話不多說，代碼貼出來，簡單易懂：<!DOCTYPE html> &l

h5實現朋友圈點贊圖片生成器

blog cnblogs 掃一掃 images 技術分享 eas 體驗 img 朋友 經常有各種朋友圈集贊活動，令人煩不勝煩。因此開發了一個朋友圈點贊圖片生成器， 方便有需要的人薅商家羊毛。 實現方式並不是直接生成了圖片，而是利用html5實現的高仿朋友圈界面， 可任意指定

APP手勢密碼繞過

roi 快捷方式 如何 網上 pic 最近修改 大廠 讀寫 相關 之前寫的文章收到了很多的好評，主要就是幫助到了大家學習到了新的思路。自從發布了第一篇文章，我就開始籌備第二篇文章了，最終打算在07v8首發，這篇文章我可以保障大家能夠學習到很多思路。之前想準備例子視頻，請求了

css3波紋特效、H5實現動態波浪

ima 頁面 form icon scale col bsp -- gpo css3實現動態波紋特效，由於css3裏面有過渡和動畫效果，現在利用css3實現動態波浪效果就很簡單了，直接使用transform來實現就ok， 使得translateX 產生偏移就可以不斷實現循環

ATM-JAVA程序 //程序有5處相同錯誤，找不出原因 轉賬功能沒有實現，修改密碼來不及實現了

Panorama——H5實現全景圖片原理

前言 　　H5是怎麼實現全景圖片播放呢？ 正文 　　全景圖的基本原理即 "等距圓柱投影"，這是一種將球體上的各個點投影到圓柱體的側面上的一種投影方式，投影后再展開就是一張 2:1 的矩形圖片。 　　全景圖並不是一個新概念，其實就是一種廣角圖（玩單反的 很懂了） 　　用 "全景播放器" 渲染全景圖，可

前端H5實現多圖片上傳並預覽

多檔案上傳並預覽 利用input 的type='file" 可以實現檔案的上傳，不過只支援單個檔案上傳。只有給input加上multiple屬性才能實現多個檔案同時上傳。 好了，下面我們來實現一個簡單的多圖片上傳並預覽的例子 <div class="input-file-box

微信小程式：web-view巢狀H5實現微信支付功能解決方案及填坑

最近一個多月加班比較嚴重，偶爾休息一天也是在補睡眠+陪家人，比較長時間沒有來進行總結記錄了。今天不加班，開始為這段時間做的東西進行下經驗總結。 這段時間因為公司需要，接觸了一些.Net前後臺開發，慢慢了解了一些WCF、H5站點、WebService、Soap、Linq等，也

H5實現輪播

頁面程式碼： <div id="body_wrapper" class="container"> <article> <section id="lunbotu"> <div cla

利用H5+實現APP線上更新

1 在APP首頁新增以下js程式碼 // 獲取本地應用資源版本號 plus.runtime.getProperty(plus.runtime.appid,function(inf){ wgtVer = inf.version; // mui.toast("當前應用版本："+wgtV

vue2 手勢密碼

元件： <template> <div class="masks" v-show="currentValue"> <div class="gesturePwd"> <div class="box"> &l

手勢密碼繪製

本案例通過JQuery的jquery.gesture.password.js外掛來進行繪製。繪製效果如下： 程式碼如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8

Win10共享印表機所需要的設定（無需密碼訪問實現印表機共享,共享不要密碼）

升級到Win10系統後，很多朋友在印表機共享方面遇到了問題，如Win10共享印表機，別的電腦不能訪問，訪問要密碼，XP訪問需要憑據，輸入密碼也無法連線等種種情況，下面小編分享下Win10共享印表機所需要的一些設定，通過連線測試。可以幫助使用者實現印表機共享無需密碼連線，有興趣的朋友不妨看看。 推薦