线上demo：https://my.weblf.cn/xly/demo/canvas/hand.html
コード：
<！DOCTYPE HTML>
<HTML>
<HEAD LANG = "EN">
<メタコンテンツ= "幅=装置幅、初期の規模= 1.0、最大規模= 1.0、ユーザースケーラブル= 0"
名前 = "ビューポート" />
<メタ文字コード= "UTF-8">
<タイトル> </ TITLE>
<スタイルタイプ= "テキスト/ cssの">
HTML、身体{
マージン： 0 ;
パディング： 0 ;
幅： 100％;
高さ： 100％;
}
</スタイル>
<スクリプトタイプ= "テキスト/ javascriptの"> VARの R = 26、
キャンバスデフォルト幅
CH = 320、// のキャンバスのデフォルトの高さ
OffsetX = 30、// 左距離
OffsetY = 30; // からの距離上部
// 円9の中心位置算出
機能CaculateNinePointLotion（diffX、diffY）を{
VARのRe = [];
のための（VARの行= 0、行<3;行++ ）{
用（VARの COL = 0; COL <3 COL ++ ）{
VARポイント= {
X-（OffsetX。+ COL * diffX +（COL * 2 + 1 ）* R＆LT）、
Y：（OffsetY行diffY * + +（+ 2 *行1）* R＆LT）
};
Re.push（ポイント）;
}
}
//は9つの中心位置の配列を返し
戻す再;
}
VAR PointLocationArr = [];
// ページがロードされ実行されています
= window.onloadの関数（）{
VAR C =のdocument.getElementById（ "myCanvas"）; // 要素を取得
CW = document.body.offsetWidthを; // デフォルト幅ブラウザの幅を取得、および変更
c.width = CWを; / / キャンバスの幅と高さを設定
c.height = CHであり;
VAR CXT = c.getContext（「2D」）; // 2D環境オブジェクトを作成する
// これにより、Xを算出し、2つの中央二つの半径から除去される二つの円の間の外側の距離二つの円、Y Y =二つの円の間の距離との間の距離= X。
VaRの X- =（CW - OffsetX * 2 - * 2 * R＆LT 3）/ 2 ;
VAR Y =（CH - OffsetY * 2 - * 2 * R＆LT 3）/ 2 ;
PointLocationArr = CaculateNinePointLotion（X、Y）; // 取得9円の中心位置配列
initEvent（C、CXT）; // ここでは指のタッチイベントが呼ばれている聞くことが
ドロー（CXT、PointLocationArr、[]、ヌル）; // 9ラウンド、CXT = 2D描画環境を、描画開始PointLocationArr =座標点9の、_LinePointArr =接続されたセットポイント、タッチポイント= XとタッチY
}
// 円線法描画
関数を。ドロー（CXT、_PointLocationArr、_LinePointArr、タッチポイント）{
IF（_LinePointArr.length> 0）{ // 点線の0よりも大きく、線画場合
cxt.beginPathを（）;
// プレスを順次ポイントを介して接続されました中心線とリンクアップ
するための（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（）;
// 指が、その後、接続が開始点として値続くたXY、指が接続をタッチエンドポイントに触れると
IF（！タッチポイント= 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（）;
}
}
// 円を過ごすためにどのように、どんなに
VAR以下のための（I = 0、I <_PointLocationArr.length; I ++ ）{
VARポイント= _PointLocationArr [I]。
cxt.fillStyle = "＃627eed" 。
cxt.beginPath（）;
cxt.arc（Point.X、Point.Y、R、 0、にMath.PI * 2、真）。
cxt.closePath（）;
cxt.fill（）;
cxt.fillStyle = "#FFFFFF" 。
cxt.beginPath（）;
cxt.arc（Point.X、Point.Y、R - 3、0、にMath.PI * 2、真）。
cxt.closePath（）;
cxt.fill（）;
// これは円の接続である場合、色を変化させる
場合（_LinePointArr.indexOf（I）> = 0 ）
{
cxt.fillStyle = "＃627eed" 。
cxt.beginPath（）;
cxt.arc（Point.X、Point.Y、R -16、0、にMath.PI * 2、真）。
cxt.closePath（）;
cxt.fill（）;
}
}
}
// 判断点是否被选中
機能IsPointSelect（タッチ、LinePoint）
{
ため（VAR ; I <PointLocationArr.length I ++ I = 0 CurrentPointの=）{
VARPointLocationArr [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 ）。
もし（DIR < R）{
場合（LinePoint.indexOf（I）<0 ）{LinePoint.push（I）;}
ブレーク。
}
}
}
// 监听触摸事件
関数InitEvent（canvasContainer、CXT）{
VAR LinePoint = [];
canvasContainer.addEventListener（ "touchstart" 機能（E）{
IsPointSelect（e.touches [ 0 ]、LinePoint）;
}、偽）。
canvasContainer.addEventListener（ "touchmove" 機能（E）{
e.preventDefault（）;
VARのタッチ= e.touches [0 ];
IsPointSelect（タッチ、LinePoint）;
cxt.clearRect（ 0,0 、CW、CH）;
ドロー（CXT、PointLocationArr、LinePoint、{X：touches.pageX、Y：touches.pageY}）;
}、偽）。
canvasContainer.addEventListener（ "touchend" 機能（E）{
cxt.clearRect（ 0,0 、CW、CH）;
描画（CXT、PointLocationArr、LinePoint、NULL ）;
警告（ "密码结果是：" + LinePoint.join（ " - >" ））;
LinePoint = [];
}、偽）。
}
</ SCRIPT>
</ head>
<body>
<キャンバスID = "myCanvas"> </キャンバス>
</ body>
</ HTML>