微信小程序canvas绘制表格根据input每输入一次表格行数增加一行

您可以使用Canvas的绘图功能来实现根据input输入的次数增加表格的行数。下面是一个示例代码：

// 获取Canvas绘图上下文
const ctx = wx.createCanvasContext('myCanvas')

// 表格的行数
let rowCount = 0

// input输入事件处理函数
function handleInput(e) {
  // 获取输入的内容
  const inputValue = e.detail.value
  
  // 每输入一次，表格行数增加一行
  rowCount++
  
  // 清除Canvas上的内容
  ctx.clearRect(0, 0, canvasWidth, canvasHeight)
  
  // 绘制表格
  drawTable()
  
  // 绘制输入的内容
  ctx.fillText(inputValue, 10, 20 + rowCount * 20)
  
  // 将绘制好的内容显示在Canvas上
  ctx.draw()
}

// 绘制表格函数
function drawTable() {
  // 绘制表格的标题栏
  ctx.fillText('标题', 10, 10)
  
  // 绘制表格的行
  for (let i = 0; i < rowCount; i++) {
    ctx.fillText(`行 ${i + 1}`, 10, 20 + (i + 1) * 20)
  }
}

// 初始化Canvas
const canvasWidth = 300
const canvasHeight = 400
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, canvasWidth, canvasHeight)
ctx.setFontSize(14)

// 绘制初始的表格
drawTable()

// 将绘制好的内容显示在Canvas上
ctx.draw()

在上述代码中，我们使用Canvas的绘图上下文（ctx）来进行绘制操作。首先，在handleInput函数中，每次输入时，表格的行数会增加一行，然后清除Canvas上的内容，重新绘制表格，并将输入的内容绘制到相应的位置上。最后，调用ctx.draw()将绘制好的内容显示在Canvas上。

注意，上述代码中的canvasWidth和canvasHeight是Canvas的宽度和高度，根据实际情况进行调整。同时，您需要在wxml文件中定义一个Canvas组件，并给它一个id（例如id="myCanvas"），以便通过wx.createCanvasContext('myCanvas')获取到Canvas的绘图上下文。

希望对您有帮助