微信小程序实现一笔画完

在实现一笔画的过程中，需要准备一个包含了所有关键点的数组，例如：

var points = [
  [100, 100],
  [200, 100],
  [200, 200],
  [100, 200],
];

接着，在画布上绘制这些关键点：

var ctx = wx.createCanvasContext('myCanvas');

points.forEach(function (point, index) {
  ctx.beginPath();
  ctx.arc(point[0], point[1], 10, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fillStyle = '#000';
  ctx.fill();
});

ctx.draw();

接下来，需要监听触摸事件，并记录下触摸点的位置：

var lastX = 0;
var lastY = 0;
var isDrawing = false;

wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec(function (res) {
  var canvas = res[0].node;
  var ctx = canvas.getContext('2d');
  var width = res[0].width;
  var height = res[0].height;

  canvas.addEventListener('touchstart', function (e) {
    var x = e.touches[0].clientX;
    var y = e.touches[0].clientY;

    points.forEach(function (point, index) {
      if (Math.abs(x - point[0]) < 10 && Math.abs(y - point[1]) < 10) {
        lastX = point[0];
        lastY = point[1];
        isDrawing = true;
      }
    });
  });

  canvas.addEventListener('touchmove', function (e) {
    if (!isDrawing) {
      return;
    }

    var x = e.touches[0].clientX;
    var y = e.touches[0].clientY;

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();

    lastX = x;
    lastY = y;
  });

  canvas.addEventListener('touchend', function (e) {
    isDrawing = false;

    var isComplete = true;

    points.forEach(function (point, index) {
      if (Math.abs(lastX - point[0]) < 10 && Math.abs(lastY - point[1]) < 10) {
        points.splice(index, 1);
        isComplete = false;
      }
    });

    if (isComplete) {
      wx.showToast({
        title: '恭喜你完成了一笔画',
        icon: 'success',
        duration: 2000
      });
    }
  });
});

在触摸事件中，判断当前触摸点是否在关键点的范围内，如果是，则记录下该点的位置，并将 isDrawing 设置为 true，表示正在绘制。在移动事件中，如果 isDrawing 为 true，则绘制一条连接上一个点和当前点的线段。在结束事件中，判断当前触摸点是否在关键点的范围内，如果是，则从关键点数组中删除该点，并判断是否还有未连接的关键点，如果没有，则表示一笔画已经完成，弹出提示框。

最后，需要在画布上绘制连线的线段：

ctx.beginPath();

points.forEach(function (point, index) {
  if (index === 0) {
    ctx.moveTo(point[0], point[1]);
  } else {
    ctx.lineTo(point[0], point[1]);
  }
});

ctx.stroke();

这样，一个简单的一笔画完的微信小程序就完成了。完整示例代码如下：

var points = [
  [100, 100],
  [200, 100],
  [200, 200],
  [100, 200],
];

var lastX = 0;
var lastY = 0;
var isDrawing = false;

wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec(function (res) {
  var canvas = res[0].node;
  var ctx = canvas.getContext('2d');
  var width = res[0].width;
  var height = res[0].height;

  canvas.addEventListener('touchstart', function (e) {
    var x = e.touches[0].clientX;
    var y = e.touches[0].clientY;

    points.forEach(function (point, index) {
      if (Math.abs(x - point[0]) < 10 && Math.abs(y - point[1]) < 10) {
        lastX = point[0];
        lastY = point[1];
        isDrawing = true;
      }
    });
  });

  canvas.addEventListener('touchmove', function (e) {
    if (!isDrawing) {
      return;
    }

    var x = e.touches[0].clientX;
    var y = e.touches[0].clientY;

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();

    lastX = x;
    lastY = y;
  });

  canvas.addEventListener('touchend', function (e) {
    isDrawing = false;

    var isComplete = true;

    points.forEach(function (point, index) {
      if (Math.abs(lastX - point[0]) < 10 && Math.abs(lastY - point[1]) < 10) {
        points.splice(index, 1);
        isComplete = false;
      }
    });

    if (isComplete) {
      wx.showToast({
        title: '恭喜你完成了一笔画',
        icon: 'success',
        duration: 2000
      });
    }
  });

  ctx.beginPath();

  points.forEach(function (point, index) {
    ctx.beginPath();
    ctx.arc(point[0], point[1], 10, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = '#000';
    ctx.fill();

    if (index === 0) {
      ctx.moveTo(point[0], point[1]);
    } else {
      ctx.lineTo(point[0], point[1]);
    }
  });

  ctx.stroke();
});