uni-app踩坑之canvas 绘制后不显示不报错

最新推荐文章于 2025-10-29 15:55:35 发布

原创最新推荐文章于 2025-10-29 15:55:35 发布 · 9.8k 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文探讨了在微信小程序中使用Canvas元素在APP端显示异常的问题，详细介绍了在onLoad与onReady生命周期方法中实例化Canvas的区别，指出在onReady内实例化是关键解决方案。

先上代码

<canvas canvas-id='share' id="share"></canvas>

js 部分我在onLoad 里面这么写的

// 初始化canvas
var ctx = uni.createCanvasContext('share');
// 绘制
ctx.drawImage(imgPath, 0, 0, 300, 500)
ctx.fillText(tetx, 100, 100)
// ......

微信小程序端没毛病，正常显示，但是！APP 端没有，啥也没有

这里出现的问题就是没有报错，也没有显示，尝试输入ctx, 也看不出来什么异常

重点来啦！！

解决方式：

一定要在onReady里面实例化canvas!!!

7 条评论

m0_52831436 2023.04.03
大佬我这实例化了还是不显示可以加个联系方式吗
- tieniuya回复超级码吏 2023.07.20
  没用，新创建的uniapp项目，好像抽风了，h5微信小程序都画不出东西，空白的，不报错
- 超级码吏回复m0_52831436 2023.05.08
  canvas标签要用canvasId，不能用id。createCanvasContext方法传入this [code=javascript] <canvas canvasId="myCanvas" width="500px" height="100px"></canvas> const ctx = uni.createCanvasContext('myCanvas',this) ctx.setFontSize(20) ctx.fillText('Hello', 20, 20) ctx.fillText('MINA', 100, 100) ctx.draw() [/code]