uni-app canvas组件在h5绘制空白

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

[内容]

[步骤] 使用canvas组件，并调用uni.createCanvasContext 接口进行绘制 [结果] 微信端正常显示绘制内容， h5端空白 [期望] h5端能正常绘制 [如果语言难以表述清晰，拍一个视频或截图，有图有真相] 见附件

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号] 2.1.0.20190713

[windows版本号]

[mac版本号]

[运行端是h5或app或某个小程序？]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试] HBuilderX 创建

[编译模式是老模板模式还是新的自定义组件模式？]

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段] 见附件

[QQ]

更多关于uni-app canvas组件在h5绘制空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

onLoad改成onReady就好了，你用的生命周期不对。

更多关于uni-app canvas组件在h5绘制空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

onReady 确实可以，赞一下。就是不明白，微信可以， h5 不可以，是不是因为， h5的脚本执行和渲染引擎是单线程的

回复 scream_leen: 微信理论上也不可以，节点相关操作需要放到onReady中，不过可能你说的原因是对的，由于微信view层通讯是异步的，碰上延迟时机恰好了。

我用了onReady也不行，刷新的时候有一瞬间可以，然后就消失了

回复 DCloud_UNI_GSQ: 出新问题了,canvas绘制空白 https://ask.dcloud.net.cn/question/81675

根据问题描述，H5端canvas绘制空白但微信端正常，这是常见问题。主要原因和解决方案如下：

const ctx = uni.createCanvasContext('myCanvas')
// 绘制操作...
ctx.draw()  // 必须加上这行才能在H5端显示