有問題可以掃碼加我微信，有償解決問題。承接小程式開發。

微信小程式開發交流qq群   173683895  、 526474645 ；

正文：

功能：根據手指觸控繪畫一條直線路徑--> 起點為手指開始觸控時的座標，終點為手指觸控結束時的座標

效果圖：

上程式碼：

<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)
    },
})