HTML5 Canvas Simple Nine cell phone gesture password unlock

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