效果展示
实现原理 利用 HTML5 的 canvas，将解锁的圈圈划出，利用 touch 事件解锁这些圈圈，直接看代码。
|
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 里的圆圈画好之后可以进行事件绑定
|
1 2 3 4 5 6 7 8 9 10 |