利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

  function createCircle() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径

        var n = chooseType;// 画出n*n的矩阵

        lastPoint = [];

        arr = [];

        restPoint = [];

        r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关

        for (var i = 0 ; i < n ; i++) {

            for (var j = 0 ; j < n ; j++) {

                arr.push({

                    x: j * 4 * r + 3 * r,

                    y: i * 4 * r + 3 * r

                });

                restPoint.push({

                    x: j * 4 * r + 3 * r,

                    y: i * 4 * r + 3 * r

                });

            }

        }

        //return arr;

    }

canvas里的圆圈画好之后可以进行事件绑定