uni-app canvas 在h5端不显示

uni-app canvas 在h5端不显示

详细问题描述

canvas H5不显示，小程序正常，官方解决一下吧！

[内容]

重现步骤

[步骤]

[结果]

[期望]

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

信息 描述
IDE HBuilder 或 HBuilderX
IDE版本号 [IDE版本号]
Windows版本 [windows版本号]
Mac版本 [mac版本号]

uni-app运行环境说明

信息 描述
运行端 h5或app或某个小程序
运行端版本号 [运行端版本号]
项目创建方式 cli创建的或HBuilderX创建的
编译模式 老模板模式或新的自定义组件模式

App运行环境说明

信息 描述
Android版本 [Android版本号]
iOS版本 [iOS版本号]
手机型号 [手机型号]
模拟器型号 [模拟器型号]

附件

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

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

[App安装包或H5地址]

[可重现代码片段]


更多关于uni-app canvas 在h5端不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

21 回复

请将问题内容补充完整

更多关于uni-app canvas 在h5端不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已提交，请查看

官方解决一下，很急 的。

同遇到这个问题， 小程序正常， h5 空白， 没有绘制， 早上刚更新的编辑器

更新之前是好的吗？

回复 DCloud_UNI_GSQ: 更新之前也没好

回复 野子: 测试一下hello uni-app里面的canvas示例是否正常？

回复 DCloud_UNI_GSQ: http://ask.dcloud.net.cn/question/74736 这个链接有带demo， 试过了不正常

回复 scream_leen: 用的什么浏览器测试的？

H5 页面 及代码



使用的HBuilderX版本多少？

回复 DCloud_UNI_GSQ: 最新版本

回复 野子: 2.1.0吗？下载个之前版本试试是否有问题？

回复 DCloud_UNI_GSQ: 都是试过了， 不行 的， 你们测试是否正常啊？

回复 野子: 你的style里的宽高怎么没单位

回复 DCloud_UNI_GSQ: 改了，不起最作用！ 你写一个demo,我copy试一下吧！

回复 野子: 还有一个问题。。。onLoad改成onReady就好了，你用的生命周期也不对。

回复 DCloud_UNI_GSQ: 生命周期原因！… 谢谢谢

尝试过 2.01 和 1.9.9 一样的

你的用法错了，已经在你帖子下回复

针对uni-app中Canvas在H5端不显示的问题，以下是常见原因和解决方案：

  1. 检查Canvas层级问题
  • H5端Canvas默认会被其他元素覆盖，建议设置z-index
  • 确保Canvas元素在DOM中正确渲染
  1. 尺寸设置问题
  • 必须显式设置Canvas的width和height属性
  • 建议使用style和canvas-id同时设置尺寸
  1. 渲染时机问题
  • 确保在onReady生命周期中操作Canvas
  • 避免在组件未挂载时进行绘制
  1. 跨平台兼容写法
// 推荐使用条件编译
// #ifdef H5
const ctx = uni.createCanvasContext('myCanvas', this)
// #endif
// #ifdef MP-WEIXIN
const ctx = wx.createCanvasContext('myCanvas')
// #endif
回到顶部