HTML5 Canvas Simple Nine cell phone gesture password unlock

Source: Internet
Author: User
Tags xdiff

It took 1.5 hours in the morning to write an HTML canvas-based gesture to unlock, mostly for fun, and possibly later.

Idea: Based on the configuration to calculate the location of nine points, in an array, of course, the index of the order in which the array is stored:

First line: 0 1 2 second line: 3 4 5 Third line: 6 7 8

And then we draw nine points based on this array of coordinates.

Furthermore, we need an array to hold the selected point, and whenever the Touchmove event determines that the distance between the current touch point and that point is less than the radius of the circle

If it's true, then add the array to the midpoint.

The line is drawn according to the data during the drawing process. It's so simple.

On the code: (Requires Chrome browser or Firefox browser to simulate the state of the phone touch effect)

Press CTRL + C to copy the code<! DOCTYPE html><ptml><pead lang= "en" > <meta content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 "name=" viewport "/> <meta charset=" UTF-8 "> <title></tit le> <style type= "text/css" > HTML, body {margin:0; padding:0; width:100%; height:100%; } </style> <script type= "Text/javascript" > var R = +, CW = +, CH = +, OffsetX = +, 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 * dif FY + (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"); The outer distance between two circles means that the distance between the two centers is removed two radius 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 = _pointlocatio Narr[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 < PointL Ocationarr.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 ("Password result is:" +linepoint.join (")"); Linepoint=[]; }, False); } </script></pead><body><canvas id= "MyCanvas" ></canvas></body></ptml>Press CTRL + C to copy the code

HTML5 Canvas Simple Nine cell phone gesture password unlock

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.