uni-app中renderjs函数无法更新页面DOM元素？

春红提问于 2026-01-30 23:32:27 阅读 39

移动

在uni-app开发中使用renderjs组件，我按文档在onReady生命周期里调用render方法，但修改DOM后页面没变化。代码如下：



  
    
  



export default {
  onReady() {
    this.$refs.myCanvas.render(() => {
      const ctx = uni.createCanvasContext('canvas')
      ctx.fillRect(10,10,100,100)
      ctx.draw()
    })
  }
}

尝试过在方法里加setTimeout包裹，或者把代码移到mounted里都不行。控制台没有报错，但画布始终是空白的，这是怎么回事啊？

renderjs uni-app

我来解答赞 7 收藏

反馈

1 条解答

Des.晓曼 Lv1

这个问题我遇到过，renderjs在uni-app里确实有点坑。你现在的代码问题出在uni.createCanvasContext的用法上，这个方法不能直接在renderjs里用。

可以试试这样改：

export default {

  onReady() {

    this.$refs.myCanvas.render((canvas) => {

      const ctx = canvas.getContext('2d') // 这里要用原生的canvas context

      ctx.fillStyle = 'red' // 设置填充颜色

      ctx.fillRect(10, 10, 100, 100) // 画矩形

    })

  }

}

关键点是：renderjs里的canvas需要用原生的getContext('2d')来获取上下文，而不是uni.createCanvasContext。后者是小程序原生的写法，在renderjs里不适用。

如果还是不行，确保你的canvas组件加了type="2d"属性，比如：<canvas type="2d" ref="myCanvas"></canvas>。这一步很容易漏掉。

2026-02-01 12:10