微信小程序canvas绘制表格根据input内容次数自动换行

要实现根据输入内容次数自动换行的表格，可以按照以下步骤进行操作：

在小程序的wxml文件中，使用canvas标签创建一个画布：

<canvas canvas-id="myCanvas"></canvas>

在小程序的js文件中，获取画布对象并设置画布的宽高：

Page({
  onReady: function () {
    const context = wx.createCanvasContext('myCanvas', this)
    const canvasWidth = 300 // 设置画布宽度
    const canvasHeight = 400 // 设置画布高度
    
    this.setData({
      context: context,
      canvasWidth: canvasWidth,
      canvasHeight: canvasHeight
    })
  }
})

编写一个绘制表格的函数，根据输入内容次数自动换行：

Page({
  onReady: function () {
    // ...

    drawTable: function (inputData) {
      const context = this.data.context
      const canvasWidth = this.data.canvasWidth
      const canvasHeight = this.data.canvasHeight

      const cellWidth = 50 // 设置每个单元格的宽度
      const cellHeight = 20 // 设置每个单元格的高度
      const padding = 5 // 设置单元格之间的间距

      const data = inputData.split(',') // 将输入内容按逗号分割成数组

      let rowCount = Math.ceil(data.length / 3) // 每行显示3个单元格，计算总行数

      context.clearRect(0, 0, canvasWidth, canvasHeight) // 清空画布

      for (let i = 0; i < data.length; i++) {
        let row = Math.floor(i / 3) // 计算当前单元格所在的行数
        let col = i % 3 // 计算当前单元格所在的列数

        let x = col * (cellWidth + padding) + padding // 计算当前单元格的x坐标
        let y = row * (cellHeight + padding) + padding // 计算当前单元格的y坐标

        // 绘制单元格边框
        context.strokeRect(x, y, cellWidth, cellHeight)

        // 绘制单元格内容
        context.fillText(data[i], x + padding, y + cellHeight / 2)
      }

      context.draw() // 将绘制的内容显示在画布上
    }
  }
})

在小程序的wxml文件中，添加一个输入框和一个按钮，用于输入内容和触发绘制表格的函数：

<input bindinput="handleInput" placeholder="请输入内容" />
<button bindtap="handleDraw">绘制表格</button>

在小程序的js文件中，编写处理输入框输入的函数和点击按钮触发绘制表格的函数：

Page({
  // ...

  handleInput: function (e) {
    this.setData({
      inputData: e.detail.value // 将输入框的值存储到data中
    })
  },

  handleDraw: function () {
    const inputData = this.data.inputData // 获取输入框的值
    this.drawTable(inputData) // 调用绘制表格的函数
  }
})

以上就是根据输入内容次数自动换行绘制表格的实现方法。当输入框中输入的内容改变时，会自动更新表格的绘制结果