完整代码

以下是一个简单的微信小程序 Canvas 签名功能的完整代码示例：

wxml 文件：

<view class="container">
  <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>
  <button class="btn" bindtap="clearCanvas">清空</button>
  <button class="btn" bindtap="saveCanvas">保存</button>
</view>

wxss 文件：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.btn {
  margin-top: 20px;
  display: inline-block;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
}

js 文件：

Page({
  onLoad: function () {
    const ctx = wx.createCanvasContext('myCanvas')
    let startX = 0
    let startY = 0
    let moveX = 0
    let moveY = 0
    let drawing = false

    wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      canvas.addEventListener('touchstart', (e) => {
        startX = e.touches[0].x
        startY = e.touches[0].y
        drawing = true
      })
      canvas.addEventListener('touchmove', (e) => {
        if (!drawing) {
          return
        }
        moveX = e.touches[0].x
        moveY = e.touches[0].y
        ctx.beginPath()
        ctx.moveTo(startX, startY)
        ctx.lineTo(moveX, moveY)
        ctx.stroke()
        startX = moveX
        startY = moveY
      })
      canvas.addEventListener('touchend', () => {
        drawing = false
      })
    })

    this.setData({
      ctx: ctx
    })
  },
  clearCanvas: function () {
    this.data.ctx.clearRect(0, 0, 99999, 99999)
    this.data.ctx.draw()
  },
  saveCanvas: function () {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: (res) => {
        console.log(res.tempFilePath)
      }
    })
  }
})

这段代码中，我们在 onLoad 中监听了 touch 事件，并在事件回调中获取坐标并在 Canvas 上绘制线条。同时，我们也通过 setData 方法将 Canvas 对象存储在了 Page 的 data 中，方便在后面的清空和保存操作中使用。

在清空操作中，我们通过 clearRect 方法清除了 Canvas 内容，并调用了 draw 方法进行重绘。

在保存操作中，我们调用了 Canvas 对象的 canvasToTempFilePath 方法，将 Canvas 内容保存为临时文件，并在回调函数中打印出了临时文件的路径。