HTML5 でジェスチャー画面のロック解除を実装_html/css_WEB-ITnose

詳細はクリックしてください

エフェクト表示

実装原理

ロック解除された円を描画するには、HTML5キャンバスを使用しますこれらのサークルのロックを解除するには、イベントをタッチします。コード。

1. function createCircle() {// ロック解除ポイントの座標を作成し、キャンバスのサイズに従って半径を均等に分配します
3. var n =chooseType;// n*n 行列を描画します
4. lastPoint = [];
5. arr = [];
6. restPoint = [];
7. r = ctx.canvas.width / (2 + 4 * n);// 式の計算半径はサイズに関連します（var i = 0; i＆lt; n; i ++）{
3 * r、
8. *r
10. コードのコードの
17. キャンバスの円が描かれた後、イベントバインディングが可能です

18. 1. function bindingEvent() {
    2. can.addEventListener("touchstart", function (e) {
    3. var po = getPosition(e);
    4. console.log(po);
    5. for (var i = 0 ; i
    6. if (Math.abs(po.x - arr[i].x) && Math.abs(po.y - arr[i].y) < r) { // 圈圈内部で開始点の有無を判断します
    8. touchFlag = true;
    9. drawPoint(arr[i].x,arr[i].y);
    10. lastPoint.push( arr[i]);
    11. restPoint.splice(i,1);
    12. break;
    13. }
    14. }
    15. }, false);
    16. can.addEventListener("touchmove", function (e) {
    17. if (touchFlag) {
    18. update(getPosition(e));
    19. }
    20. }, false);
    21. can.addEventListener("touchend", function (e) {
    22. if (touchFlag) {
    23. touchFlag = false;
    24. storePass(lastPoint);
    25. setTimeout(function(){
    27. init();
    28. }, 300);
    29. }
    32. }, false);
    33. }

    复制代

    
    
    次へ了最关键の步默制解锁路径逻辑，过touchmoveイベントの不断接触発行，调用canvasのmoveToメソッドとlineToメソッドを使って描画します，同時に私が到達したかどうかを判断します画の圈圈里面、その中に lastPoint は正しい圈路を保持し、restPoint はすべての圈圈削除正圈路の後に残ります。時刻调用
    
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    for (var i = 0 ;私は＜配列の長さ ; i++) { // 每帧先握面板画出来
    drawCle(arr[i].x, arr[i].y);
    }
    drawPoint(lastPoint);// 每帧花轨迹
    ドローライン（PO、lastPoint）; // ].x) < r && Math.abs(po.y -restPoint[i].y) < r) {
    drawPoint(restPoint[i].x,restPoint[i].y);
    7. lastPoint .push(restPoint[i]);
    8. restPoint.splice(i, 1);
    9. Break;
    10. }
    }
    复制幣

    
    
    最後のステップは仕上げ作業で、パス内の lastPoint によって保存された配列をパスワードに変換してローカルストレージに保存します。これはロック解除の検証ロジックの処理に使用されます。
    
    

    1. function storePass(psw) {//タッチエンド終了後のパスワードとステータスの処理
    2. if (pswObj.step == 1) {
    3. if (checkPass(pswObj.fpassword , psw)) {
    4. pswObj.step = 2; pswObj.spassword = pswObj.step = ';
    drawStatusPoint('#2CFF26'); .setItem('passwordx', JSON.stringify(pswObj.spassword));
    window.localStorage.set (('chooseType',chooseType)); document.getElementById('title').innerHTML = '2 回矛盾しています、再入力';
    6. 、 psw)) {
    7. document.getElementById('title') drawStatus。 Point('red');
    8. document.getElementById('title').innerHTML = 'ロック解除に失敗しました'; j.fpassword = psw;
    9. document.getElementById('title') .innerHTML = 'Enter again'; ML5 のロック解除はコンポーネントとして記述され、https://github に配置されています。チーム: http://www. loyteam.com/2015/07 ... u-shou-shi-jie-suo/
    HTML5 コンテンツの詳細については、
    をクリックしてください。