如果对您有帮助，请关注我，加入微信小程序开发交流qq群（173683895）相互交流学习。谢谢

功能：根据手指触摸绘画一条直线路径--> 起点为手指开始触摸时的坐标，终点为手指触摸结束时的坐标

效果图：

<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' style="border: 1px solid;" />

// pages/test/test.js
var strat_x, strat_y, ent_x, ent_y, beginPath;
var ctx = wx.createCanvasContext('myCanvas');
Page({
  data: {
    _num:1
  },

  onLoad: function () {
    var that = this;
    var query = wx.createSelectorQuery();
    //选择id
    query.select('.myCanvas').boundingClientRect()
    query.exec(function (res) {
      that.setData({
        img_Width: res[0].width,
        img_Height: res[0].height
      })
      //res就是 该元素的信息 数组
      ctx.drawImage('/image/txt.jpg', 0, 0, res[0].width, res[0].height)
      ctx.draw()
    })
  },
  // 鼠标触摸事件
  EventHandleStart: function (event) {
    strat_x = event.touches[0].x;
    strat_y = event.touches[0].y;
  },
  // 鼠标结束触摸事件
  EventHandle: function (event) {
    var that = this;
      ent_x = event.changedTouches[0].x;
      ent_y = event.changedTouches[0].y;
      ctx.setLineWidth(2); // 设置线宽
      ctx.setStrokeStyle('red')
      ctx.beginPath(); //创建路径
      ctx.moveTo(strat_x, strat_y); // 设置路径起点坐标
      ctx.setLineDash();
      var xxx = ent_x - strat_x;
      var num = 5
      for (var i = 0; i < xxx; i++) {
        if (i == num && strat_x + 5 < ent_x) {
          num = num + 5
          ctx.moveTo(strat_x, strat_y);
          ctx.bezierCurveTo(strat_x, strat_y + 2, strat_x + 5, strat_y + 2, strat_x + 5, strat_y)
          strat_x = strat_x + 5
          ctx.moveTo(strat_x, strat_y);
          ctx.bezierCurveTo(strat_x, strat_y - 2, strat_x + 5, strat_y - 2, strat_x + 5, strat_y)
          strat_x = strat_x + 5
        }
      }
      ctx.stroke();//画出当前路径的边框。默认颜色色为黑色。
      ctx.setFontSize(20)
      ctx.setFillStyle('red')
      ctx.draw(true)
    },
})