微信小程序 Canvas 绘制图片，退出重进继续上次绘制 - 详细教程

为了实现在小程序中继续上次绘制内容，可以将绘制的数据存储在本地缓存中。在页面加载时，可以通过wx.getStorageSync()方法获取之前保存的绘制数据，然后在drawTable()方法中使用这些数据进行绘制。同时，在保存图片时，也需要将绘制的数据保存到本地缓存中，以便下次进入页面时可以继续使用。\n\n具体的实现步骤如下：\n\n1. 在onReady()方法中，添加获取本地缓存数据的逻辑，如果有缓存数据，则使用缓存数据进行绘制。\njavascript\nonReady() {\n const ctx = wx.createCanvasContext('myCanvas');\n this.ctx = ctx;\n this.setData({ rows: [] });\n \n // 获取本地缓存数据\n const rows = wx.getStorageSync('rows');\n if (rows) {\n this.setData({ rows });\n }\n \n this.drawTable();\n},\n\n\n2. 在drawTable()方法中，添加保存绘制数据到本地缓存的逻辑。\njavascript\ndrawTable() {\n // ...\n\n // 添加新内容到 rows 数组\n const newRow = [\n // ...\n ];\n this.setData({ rows: [...this.data.rows, newRow] });\n\n // 绘制 rows 数组中的内容\n for (let i = 1; i < this.data.rows.length; i++) {\n const row = this.data.rows[i];\n for (let j = 0; j < row.length; j++) {\n const point = row[j];\n const text = point.text;\n // ...\n }\n }\n\n // ...\n\n // 保存绘制数据到本地缓存\n wx.setStorageSync('rows', this.data.rows);\n},\n\n\n3. 在saveImg()方法中，添加清除本地缓存数据的逻辑。\njavascript\nsaveImg() {\n // ...\n\n // 清除本地缓存数据\n wx.removeStorageSync('rows');\n},\n\n\n通过以上步骤，就可以实现在小程序中继续上次绘制内容的功能。每次进入页面时，会先从本地缓存中获取之前保存的绘制数据，并使用这些数据进行绘制。当保存图片或刷新页面时，会清除本地缓存数据，以便下次进入页面时重新开始绘制。