HTML5 Canvas手机九宫格手势密码解锁 ，支持N*N个点

1;(function ($) {
2  $.fn.locked = function (settings) {
3    settings = $.extend({}, defaultSettings, settings)
4  }
5})(jQuery)
6
7$(function () {
8  $('#canvas').locked({
9    n: 4,
10  })
11})
Copy

1//两个变量记录，所有的点以及选中的点
2var pointArr = [] //点数组
3var pointActiveArr = [] //已激活点数组
4
5//默认配置
6var defaultSettings = {
7  r: 25, //大圆半径
8  sr: 8, //小圆半径，小圆既选中状态，内部的小圆
9  w: document.body.offsetWidth, //canvas宽度
10  h: document.body.offsetWidth, //canvas高度
11  n: 3, //数量n*n
12  pointColor: '#ff0000', //选中状态点线颜色
13  pointDefault: '#686868', //默认点颜色
14}
Copy

1var canvas = $(this)[0] //jQuery对象转成js对象
2var ctx = canvas.getContext('2d')
3
4//防止手机端canvas模糊，计算dpi
5var dpi = getPixelRatio(ctx)
6settings.r *= dpi
7settings.sr *= dpi
8settings.w *= dpi
9settings.h *= dpi
10
11//设置canvas宽度高度
12canvas.width = settings.w
13canvas.height = settings.h
Copy

1//获取dpi
2function getPixelRatio(context) {
3  var backingStore =
4    context.backingStorePixelRatio ||
5    context.webkitBackingStorePixelRatio ||
6    context.mozBackingStorePixelRatio ||
7    context.msBackingStorePixelRatio ||
8    context.oBackingStorePixelRatio ||
9    context.backingStorePixelRatio ||
10    1
11
12  return (window.devicePixelRatio || 1) / backingStore
13}
Copy

1pointArr = creatPoint()
2
3//创建n*n个点
4function creatPoint() {
5  var points = []
6  for (var row = 0; row < settings.n; row++) {
7    for (var col = 0; col < settings.n; col++) {
8      points.push({
9        x: (settings.w / (settings.n + 1)) * (col + 1),
10        y: (settings.h / (settings.n + 1)) * (row + 1),
11      })
12    }
13  }
14  return points
15}
Copy

1//事件监听
2canvas.addEventListener(
3  'touchstart',
4  function (e) {
5    touch(e)
6  },
7  false
8)
9canvas.addEventListener(
10  'touchmove',
11  function (e) {
12    touch(e)
13  },
14  false
15)
16canvas.addEventListener(
17  'touchend',
18  function (e) {
19    touch(e)
20  },
21  false
22)
Copy

1//事件监听处理
2function touch(e) {
3  var e = e || window.event
4  console.log(e.type)
5  switch (e.type) {
6    case 'touchstart':
7      isSelect(e.touches[0])
8      break
9    case 'touchend':
10      draw()
11      alert('密码结果是：' + pointActiveArr.join('-'))
12      pointActiveArr = []
13      break
14    case 'touchmove':
15      isSelect(e.touches[0])
16      draw(e.touches[0])
17      e.preventDefault()
18      break
19  }
20}
Copy

1//判断是否在圆内
2//通过数学计算来判断
3function isSelect(touche) {
4  //遍历所有点，查看当前位置是否在圆内
5  for (var i = 0; i < pointArr.length; i++) {
6    var point = pointArr[i]
7    var x_diff = Math.abs(point.x - touche.pageX * dpi)
8    var y_diff = Math.abs(point.y - touche.pageY * dpi)
9
10    //如果 (x_diff*x_diff + y_diff*y_diff) > settings.r*settings.r  则在圆外
11    if (x_diff * x_diff + y_diff * y_diff < settings.r * settings.r) {
12      if (pointActiveArr.indexOf(i) < 0) {
13        pointActiveArr.push(i)
14      }
15      break
16    }
17  }
18}
Copy

1//绘制canvas
2function draw(touch) {
3  ctx.clearRect(0, 0, settings.w, settings.h)
4  //绘制n*n个圈
5  for (var i = 0; i < pointArr.length; i++) {
6    var point = pointArr[i]
7    ctx.fillStyle = settings.pointDefault
8    ctx.beginPath()
9    ctx.arc(point.x, point.y, settings.r, 0, Math.PI * 2, true)
10    ctx.closePath()
11    ctx.fill()
12    ctx.fillStyle = '#ffffff'
13    ctx.beginPath()
14    ctx.arc(point.x, point.y, settings.r - 6, 0, Math.PI * 2, true)
15    ctx.closePath()
16    ctx.fill()
17
18    //如果当前点已被选中，这中间添加一个小的圆
19    if (pointActiveArr.indexOf(i) >= 0) {
20      ctx.fillStyle = settings.pointColor
21      ctx.beginPath()
22      ctx.arc(point.x, point.y, settings.sr, 0, Math.PI * 2, true)
23      ctx.closePath()
24      ctx.fill()
25    }
26  }
27
28  //如果有传当前移动位置，则添加和最后一个选中点的连线
29  if (touch != null) {
30    var lastPoint = pointArr[pointActiveArr[pointActiveArr.length - 1]]
31    ctx.beginPath()
32    ctx.moveTo(lastPoint.x, lastPoint.y)
33    ctx.lineTo(touch.pageX * dpi, touch.pageY * dpi)
34    ctx.stroke()
35    ctx.closePath()
36  }
37
38  //绘制选中的线
39  if (pointActiveArr.length > 0) {
40    ctx.beginPath()
41    for (var i = 0; i < pointActiveArr.length; i++) {
42      var index = pointActiveArr[i]
43      ctx.lineTo(pointArr[index].x, pointArr[index].y)
44    }
45    ctx.lineWidth = 10
46    ctx.strokeStyle = settings.pointColor
47    ctx.stroke()
48    ctx.closePath()
49  }
50}
Copy