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

本人本来刚入小程序的坑,公司就来一波需求说: 希望 我前期开发出小程序后 后期还要开发出一套一模一样的H5 出来 ,what?

好的 于是乎 我用了 taro 但是react 我不是很熟悉,开发有点吃力,为了节约时间 后来放弃,选择跳入基于vue的 uniapp 这个坑 ,一来我就遇到很多问题:比如图片怎么也不不显示啊,组件嵌套不能canvas不能显示啊,传值出现问题啊 等等.而本文 我要记录的是 关于canvas的问题.

首先提出几个值得关注问题:

  1. 组件嵌套,在子组件中不能使用canvas ,也不是说不能,只能说使用了也没用,H5中显示无果,小程序一样.(我在uniapp社区提出这个bug ,但是我看有人在今年的6.7月份也提出过,但至今为止没有解决这个问题)
  2. 在H5中 出现canvas闪烁的问题 ,就一定要用异步去显示canvas,
  3. 绘制canvas 时  得用uniapp 中的draw()去绘制,不然 不会显示(原生一般直接填充就完事了)
  4. 一定要在onReady函数中进行实例化canvas并且绘制 

 

下面 我的一个需求是 实现温度显示 

      





 

 

然后 这是实现的效果:H5跟小程序

关于uniapp 中使用canvas 的坑 H5不显示问题_第1张图片关于uniapp 中使用canvas 的坑 H5不显示问题_第2张图片

你可能感兴趣的:(前端,uniapp,VUE,uniapp)