微信小程序 Canvas 绘制内容保存与恢复 - 退出重进后继续绘制

在小程序中，canvas绘制的内容是无法保存的，每次进入页面都需要重新绘制。但你可以通过将绘制的坐标位置和内容保存到全局变量或缓存中，在重新进入页面后获取到这些值，从而继续上次的绘制。

首先，在app.js中定义一个全局变量，用于保存绘制的坐标位置和内容：

App({
  globalData: {
    rows: []
  }
})

然后，在页面的onLoad方法中获取全局变量的值，并在onReady方法中绘制保存的内容：

const app = getApp()

Page({
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas')
    this.ctx = ctx
    this.drawSavedContent()
  },
  
drawSavedContent() {
    const { rows } = app.globalData
    if (rows.length > 0) {
      for (let i = 0; i < rows.length; i++) {
        const row = rows[i]
        for (let j = 0; j < row.length; j++) {
          const point = row[j]
          const text = point.text
          this.ctx.font = 'black 12px 行书'
          this.ctx.strokeRect(point.x, point.y, point.width, 50)
          this.ctx.fillText(text, point.x + point.width / 2, point.y + 25)
        }
      }
      this.ctx.draw()
    }
  },

  // 其他方法省略...
})

这样，在重新进入页面时，就会继续绘制上次保存的内容。但需要注意的是，如果用户清空了缓存或重启了小程序，之前保存的内容会丢失。