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

最新推荐文章于 2025-05-15 15:31:09 发布

清风十里过长街

最新推荐文章于 2025-05-15 15:31:09 发布

阅读量9.5k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/danby2/article/details/108101412

uni-app 专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上代码

<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!!!

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

清风十里过长街

关注关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp(微信小程序/支付宝小程序) - 最新解决canavs绘制海报、二维码图片等不显示问题，在uniapp小程序开发中使用canavs制作base64图片在真机运行时空白不显示（详细解决方法）

高级前端工程师

04-08

4848

uni-app，微信小程序，支付宝小程序，uniapp小程序，canvas，base64，微信小程序中base64格式的小程序码通过canvas画出来无效，真机调试二维码不显示的问题。小程序base64编码图片无法使用canvas绘制，uni-app小程序真机显示canvas上利用base64图片生成的海报，微信小程序中base64格式的小程序码通过canvas画出来无效，解决canvas base64图片在小程序真机不显示问题，无法使用canvas绘制的问题，微信小程序使用canvas真机不生效，微信小

详解canvas drawImage()方法绘制图片不显示的问题

09-22

主要介绍了详解canvas drawImage()方法绘制图片不显示的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

6 条评论您还未登录，请先登录后发表或查看评论

【小程序canvas】createCanvasContext绘图不显示

qq_38261819的博客

03-01

1388

绘图后一定要调用draw()方法！！CanvasContext.draw(boolean reserve, function callback) | 微信开放文档 CanvasContext.draw(boolean reserve, function callback) 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。 ...

记录一次vue3 uniapp createCanvasContext拿不到canvas实例

最新发布

weixin_43899393的博客

05-15

275

在vue3中需要这样使用。

uni-app APP端 canvas 绘图不显示

超级小东的博客

08-19

4060

在uniapp中使用uni.canvasToTempFilePath 实测在微信小程序/H5端success(res)回调是base64的图片在App端返回的是app的本地(临时)路径不是base64的图片 uni.canvasToTempFilePath({ width: options.width, height: options.height, destWidth: options.width, destHeight: options.height, can

uniapp uni-popup弹出框中的canvas不显示失效

qq_16159433的博客

05-24

2436

解决uniapp中 canvas嵌套在uni-popup中时，cavas不显示或显示空白的问题。

uniapp组件引入canvas显示不出来

Da6668_lei的博客

10-21

3454

uniapp组件引入canvas显示不出来 uniapp组件引入canvas显示不出来，关于这个问题我百度有的结果是错误的，误导我以为引入组件之后就不能显示canvas，但是我的ucharts也是canvas也显示出来了，所以就一直试，终于找到，小白菜就是多走弯路错误案例，没有加实例化this 没有显示添加实例化this 所以网上搜的东西仅限供参考，还是要多找一会 ...

uniapp canvas组件不展示Vue3

Web995的博客

09-16

1254

uniapp canvas组件不展示Vue3

uniapp canvas生成海报不显示问题

weixin_45435854的博客

08-23

3245

uniapp canvas生成海报不显示问题在APP中建议把图片放本地资源，网络资源的渲染速度比较慢。可以输出看canvas是否有拿到本地临时路径图片，如果没有拿到就开始drow就会报错，一般H5和APP会报错： ready of undefined... 小程序会报../../资源渲染层出错一般即没有报错，也没有显示图片是因为 canvas的实例要在onReady()中获取，一定要小心这个坑。 data() { return { context:'' } } onRea

uni-app开发canvas在小程序端或者h5端不生效

搬砖小鱼，请多指教呦

01-10

6357

有以下几种可能： 1、如果在canvas标签中写了type=“2d“，则在小程序端会无法显示，删掉即可 2、习惯h5的写法只写了id没有写canvas-id，也会无法显示 3、如果是旧版本，没有写在创建canvas的时候没有写this也有可能导致不显示（其实用现在的新版本，不写this也是可以显示的但是建议写上）其他canvas问题后续待补充 ...

uniapp canvas 画图失败

a_biggerfish的博客

11-18

2045

绘制海报过程中微信开发工具报错所canvas最好使用2d，然后我使用2d后一直画图失败，error也监听不到报错，这个为题一直折磨了我好久。

【uniapp-bug记录】canvas在安卓机上不展示

spicyIsPleasant的博客

01-21

366

避免scroll-view和canvas同时使用。

关于uniapp 中使用canvas 的坑 H5不显示问题

热门推荐

weixin_39475476的博客

11-22

1万+

本人本来刚入小程序的坑,公司就来一波需求说: 希望我前期开发出小程序后后期还要开发出一套一模一样的H5 出来 ,what? 好的于是乎我用了 taro 但是react 我不是很熟悉,开发有点吃力,为了节约时间后来放弃,选择跳入基于vue的 uniapp 这个坑 ,一来我就遇到很多问题:比如图片怎么也不不显示啊,组件嵌套不能canvas不能显示啊,传值出现问题啊等等.而本文我要记录的...

uniapp 微信小程序 canvas 问题

XL984507092的博客

05-27

1064

他不支持真机调试，只能通过预览，另外获取 canvas 的图片的时候 ios 预览 canvas 的图片在真机上不能展示是因为 ios 中需要开启 webp 为 true。今天写小程序的时候在真机调试的时候发现 canvas-2d 在真机上没有效果，获取不到 canvas 信息。

uniapp使用canvas的一些问题

空&白的博客

11-26

9535

1、canvas无效，出不来修改前： let ctx = uni.createCanvasContext('shareCanvas'); 修改后： let ctx = uni.createCanvasContext('shareCanvas', this); 在自定义组件下，第二个参数传入组件实例this，若不传，则无法显示 2、canvas绘制图片（drawImage）无效，显示不了修改前： let imageW=uni.upx2px(456)//图片的尺寸 let imgUrl=this.sha

uniapp中canvas绘制图片内容空白报错原因总结

zhangxueyou2223的博客

04-12

7619

🧨🧨🧨1.画布的大小大于了图片的大小导致了生成的内容是空白的,canvas画布初始值没有，导致没有绘制成功//默认初始值 canvasWidth1 canvasHeight1data() {return {ctx: null,},

uniapp使用canvas绘图在app端背景和文字无法绘制

xiyan_yu的博客

07-06

845

uniapp使用canvas绘图在app端背景和文字无法绘制

uniapp canvas在小程序里画不出来

qq_41904411的博客

03-08

807

h5,app下都没有问题，只有微信小程序画不出来。解决：去除type属性就可以了。

uniap小程序中使用canavs绘制base64格式，真机调试二维码不显示的问题。

weixin_73077230的博客

01-11

918

这样的缺点在于每调用一次写一个文件，文件会越写越多，当文件管理器中文件总大小超过最大限制则会报错。先把小程序码通过小程序API中的FileSystemManager.writeFile()接口写入本地并获取到一个临时URL。小程序中有一个这样的场景：一个图片(包括了背景图，二维码，标题)，类似于zfb中的每天扫一扫，方便用户保存在本地。小程序码通过后台接口获取，格式如下：'data:image/jpg;画出来之后，在微信开发者工具上有效，在真机上无效。accomplish！

uni-app canvas绘制雷达图

09-11

Uni-app是一种支持跨平台开发的框架，可以同时在Web、iOS、Android以及各种小程序平台上运行。而Canvas是HTML5提供的功能强大的绘图API。因此，在uni-app中使用Canvas绘制雷达图是可行的。常用的绘图库uCharts是一款基于Canvas API开发的适用于各个前端应用的图表库，包括uni-app。开发者可以使用uCharts编写一套代码，然后在uni-app中将其运行到各个平台上，包括小程序平台。具体实现绘制雷达图的步骤如下： 1. 首先，你需要在uni-app项目中引入uCharts库。可以通过npm安装或者直接下载导入。 2. 在页面中创建一个Canvas元素，用于绘制雷达图。可以通过设置Canvas的宽高来控制雷达图的大小。 3. 接下来，在页面的脚本中，引入uCharts库，并创建一个绘图实例。 4. 使用绘图实例的API去配置和绘制雷达图。你可以设置雷达图的数据、样式、标签等。 5. 最后，将绘制好的雷达图渲染到Canvas中，以便在页面中显示出来。需要注意的是，具体的代码实现可能会根据使用的uCharts版本和uni-app的不同而有所不同。因此，在具体的实践过程中，你可以根据具体的需求和文档进行相应的调整。总之，通过使用uCharts库和Canvas API，你可以在uni-app中实现绘制雷达图的功能。