移动端手绘圆形--我就画个圈圈

keep~~ 前段时间，有个活动需求是“用户绘制一个圆形，符合规则就可进行抽奖”。 开始的思路是通过用户绘制的轨迹获取一组坐标点，再随机获取三个点计算圆心、半径绘制圆形，但手绘的线条很难是个规整的圆形，且按随机获取的坐标点计算圆心、半径也存在偏差。

调整了思路，首先在页面定义绘制区域，绑定touch事件:

 <canvas id="drawArea" class="breathe imgHorizontalCenter"></canvas>

根据绘制轨迹获取坐标点：

getCanvasPos: function (canvas, e) {
        //获取鼠标在canvas上的坐标
        function getStyles(obj) {
          return document.defaultView.getComputedStyle(obj);
        }

        var rect = canvas.getBoundingClientRect(),
          leftB = parseInt(getStyles(canvas).borderLeftWidth),
          topB = parseInt(getStyles(canvas).borderTopWidth);
        return {
          x: (e.clientX - rect.left) - leftB,
          y: (e.clientY - rect.top) - topB
        };
      },

调用canvas lineTo()生成路径：

cxt.moveTo(point[0].x, point[0].y);
for (var i = 1; i < point.length; i++) {
    cxt.lineTo(point[i].x, point[i].y);
}

根据需求制定了判断的规制：

  if (point.length > 0) {
    var a = Math.abs(point[point.length - 1].x - point[0].x),
    b = Math.abs(point[point.length - 1].y - point[0].y);
    // console.log('a=' + a + ';b=' + b)
    if (a < 200 && b < 200) {
    //以第一个、最后一个坐标点的距离不超过某值视为成功绘制圆
        var f = cwidth * 0.6;
        if (xMax - xMin >= f && yMax - yMin >= f) {
        //以X轴、Y轴上绘制的范围超过某值视为达标
            cxt.closePath();
            alert('绘制成功')
            // cxt.clearRect(0, 0, cwidth, cwidth);
        } else {
            alert('绘制范围不达标')
            // cxt.clearRect(0, 0, cwidth, cwidth);
        }
    } else {
        alert('绘制不合格')
        // cxt.clearRect(0, 0, cwidth, cwidth);
    }
}

以上判断规制，因实际绘制会出现多种结果，所以只要求满足简单的两个条件；用户即使绘制多圈也算是合格的。

到此，是绘制圆形的实现过程，完整的代码在示例中。

发现整理记录还是有必要的，之前都没发现原来有一段代码是在最后的实现中没有的 o(╥﹏╥)o

ଘ(੭ˊᵕˋ)੭* ੈ✩