Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to use HTML5 to make screen gestures to unlock the relevant knowledge, the content is detailed, logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

The realization principle uses the canvas of HTML5, delineates the unlocked circles, unlocks these circles with touch events, and looks directly at the code.

Function createCircle () {/ / create the coordinates of the unlocking point, distribute the radius var n = chooseType;// evenly according to the size of the canvas, and draw the matrix lastPoint = []; arr = []; restPoint = []; r = ctx.canvas.width / (2 + 4 * n); / / the formula calculates that the radius is related to the size of canvas (var I = 0; I < n). Arr.push +) {for (var j = 0; j < n; jacks +) {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;}

Event binding can be performed after the circle in canvas is drawn.

Function bindEvent () {can.addEventListener ("touchstart", function (e) {var po = getPosition (e); console.log (po); for (var I = 0; I < arr.length) If (Math.abs (po.x-arr [I] .x) < r & & Math.abs (po.y-arr [I] .y) {/ / is used to determine whether the starting point is inside the circle touchFlag = true; drawPoint (arr [I] .x, arr [I] .y); lastPoint.push (ARR [I]) RestPoint.splice (break; 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 ();}, false);}

Then the most critical step is to draw the unlock path logic, through the continuous trigger of touchmove events, call the moveTo method and lineTo method of canvas to draw the discount, and at the same time judge whether it reaches the circle we have drawn, in which lastPoint saves the correct circle path, and restPoint saves the rest after all the circles are removed from the correct path. Update method:

Function update (po) {/ / kernel transformation method calls ctx.clearRect (0,0, ctx.canvas.width, ctx.canvas.height) during touchmove; for (var I = 0; I < arr.length; iTunes +) {/ / draw the panel first per frame drawCle (arr [I] .x, arr [I] .y);} drawPoint (lastPoint) / / drawLine (po, lastPoint) per frame; / / draw the center of each frame for (var I = 0; I < restPoint.length; iPoint +) {if (Math.abs (po.x-restPoint [I] .x) < r & & Math.abs (restPoint [I] .y) < r) {drawPoint (restPoint.x, restPoint.y) LastPoint.push (restPoint [I]); restPoint.splice (I, 1); break;}

Finally, there is the finishing touch. the array saved by lastPoint in the path is changed into a password and stored in localstorage, and then it is used to deal with the unlocking verification logic. After the end of function storePass (psw) {/ / touchend, the password and state are handled.

If (pswObj.step = = 1) {if (checkPass (pswObj.fpassword, psw)) {pswObj.step = 2; pswObj.spassword = psw; document.getElementById ('title') [xss_clean] =' password saved successfully'; drawStatusPoint ('# 2CFF26'); window.localStorage.setItem ('passwordx', JSON.stringify (pswObj.spassword)) Window.localStorage.setItem ('chooseType', chooseType);} else {document.getElementById (' title') [xss_clean] = 'inconsistent twice, re-enter'; drawStatusPoint ('red'); delete pswObj.step }} else if (pswObj.step = = 2) {if (checkPass (pswObj.spassword, psw)) {document.getElementById ('title') [xss_clean] =' unlocked successfully'; drawStatusPoint ('# 2CFF26');} else {drawStatusPoint ('red') Document.getElementById ('title') [xss_clean] =' unlock failed';}} else {pswObj.step = 1; pswObj.fpassword = psw; document.getElementById ('title') [xss_clean] =' enter again' }} these are all the contents of this article entitled "how to use HTML5 to make screen gesture unlocking function". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.