线上Demo: Https://My.Weblf.Cn/xly/demo/canvas/hand.Html
Code:
<!DOCTYPE html>
<html>
<head 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></title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">var R = 26,//
the CW = 400,radius of//
Canvas default width
CH = 320., // canvas default height of
the OffsetX = 30, // left distance
OffsetY = 30; // distance from the upper
// calculate the center position of the circle 9
function CaculateNinePointLotion (diffX, diffY) {
var Re = [];
for ( var Row = 0; Row <. 3; Row ++ ) {
for ( var COL = 0; COL <. 3; COL ++ ) {
var Point = {
X-: (the OffsetX + COL * diffX + (COL * 2 +. 1 ) * R & lt),
The Y: (OffsetY + + Row diffY * (Row +. 1 * 2) * R & lt)
};
Re.push (Point);
}
}
// Returns an array of nine center positions
return Re;
}
var PointLocationArr = [];
// After loading the page runs
the window.onload = function () {
var C = document.getElementById ( "myCanvas"); // get the elements
the CW = document.body.offsetWidth; // Get the width of the browser, and modify the default width
c.width the CW =; // set the width and height of the canvas
c.height = CH;
var CXT = c.getContext ( "2d"); // Create a 2d environment object
// outer distance between two circles that is removed from the two center two radii, thereby calculating x = x distance between two circles, y y = the distance between two circles.
var X-= (the CW - the OffsetX * 2 - * 2 * R & lt. 3) / 2 ;
var the Y = (CH - OffsetY * 2 - * 2 * R & lt. 3) / 2 ;
PointLocationArr = CaculateNinePointLotion (X-, the Y); // Get 9 circle center position array
initEvent (c, CXT); // here to listen finger touch event has been called
draw (CXT, PointLocationArr, [], null ); // start drawing nine round, cxt = 2d drawing environment, PointLocationArr = coordinates of point 9, _LinePointArr = Connected set points, touchPoint = x and touch Y
}
// circle line drawing method
function the Draw (CXT, _PointLocationArr, _LinePointArr, touchPoint) {
IF (_LinePointArr.length> 0) { // if even over the line point is greater than 0, then drawing a line
cxt.beginPath ();
// press sequentially connected through the center point together with the cable connected
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 the finger touches the xy has a value, then the connection will last as a starting point, the end point where the finger touches the connection
IF (touchPoint =! null )
{
var lastPointIndex = _LinePointArr [_LinePointArr . 1-.length ];
var LASTPOINT = _PointLocationArr [lastPointIndex];
cxt.beginPath ();
cxt.moveTo (lastPoint.X, lastPoint.Y);
cxt.lineTo (touchPoint.X, touchPoint.Y);
cxt.stroke ( );
cxt.closePath ();
}
}
// No matter how, to spend the circle
for ( var0 = I; I <_PointLocationArr.length; I ++ ) {
var Point = _PointLocationArr [I];
cxt.fillStyle = "# 627eed" ;
cxt.beginPath ();
cxt.arc (point.x, point.y, R & lt, 0, 2 * Math.PI, to true );
cxt.closePath ();
cxt.fill ();
cxt.fillStyle = "#FFFFFF" ;
cxt.beginPath ();
cxt.arc (point.x, point.y, R & lt -. 3, 0, 2 * Math.PI, to true );
cxt.closePath();
cxt.fill ();
if// if this is the connection of the circle, the color change
(_LinePointArr.indexOf (I)> = 0 )
{
cxt.fillStyle = "# 627eed" ;
cxt.beginPath ();
cxt.arc (point.x, point.y, R & lt -16, 0, 2 * Math.PI, to true );
cxt.closePath ();
cxt.fill ();
}
}
}
// determines whether the selected point
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);
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>