收藏
回答

live-player 中 canvas 动画无法显示?

问题: 父容器中使用了一个live-player,由于全屏时要显示一些动画,所以在live-player中插入了一个动画组件,中间包含了canvas;

但是在安卓下动画无法显示,IOS是好的。

// 父容器代码
<LivePlayer >
    <Donghua />
</LivePlayer>

11

// 动画组件的代码
<View
   style="width: 280px; height: 280rpx;"
   className="countdown-container flex flex-item-center flex-justify-center">
  <Canvas style='width: 280rpx; height: 280rpx;z-index: 0; border: 1px solid red;' canvasId="cvs1" ></Canvas>
  <Canvas style='width: 280rpx; height: 280rpx;z-index: 1;border: 1px solid black;' canvasId="cvs2"></Canvas>
  <Canvas style='width: 280rpx; height: 280rpx;z-index: 2;border: 1px solid yellow;' canvasId="cvs3"></Canvas>
  <View className="flex flex-col">
     <View className="timer-count"> {count} </View>
     <View className="timer-tips"> 倒计时 (S) </View>
  </View>
</View >


回答关注问题邀请回答
收藏

2 个回答

  • Riven.
    Riven.
    2021-07-29

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2021-07-29
    有用
    回复 5
    • 爱码士
      爱码士
      2021-08-02
      微信: 8.0.9
      系统版本号:Android 11
      小程序调试基础库:2.10.4 是好的。 更新的版本无法显示。


      代码是taro写的,需要用live-plear包裹起来。
      2021-08-02
      回复
    • Riven.
      Riven.
      2021-08-02回复爱码士
      你好,代码片段提供一下(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      2021-08-02
      回复
    • 爱码士
      爱码士
      2021-08-02回复Riven.
      https://developers.weixin.qq.com/s/P05J9gmJ7Ps3 
      尽快看下吧,不行了加我微信orQQ远程调试一下。谢谢了。
      2021-08-02
      回复
    • Riven.
      Riven.
      2021-08-02回复爱码士
      https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html
      2021-08-02
      回复
    • 爱码士
      爱码士
      2021-08-03回复Riven.
      终于搞定了,谢谢。


      总结以下这个问题发生的原因:
      1、canvas动画不显示,是因为使用的api在基础库2.11.0 以后不支持了。 故重新调整了代码,才显示了出来,示例如下:


      2、动画显示后,发现画的圆在真机上是椭圆的,并且宽高不对。 这里自己写了一个rpxTopx的方法,在界面初始化, 以及每次绘制圆的时候转换宽高。
      2021-08-03
      回复
  • 爱码士
    爱码士
    2021-07-29

    补充一下安卓的测试效果, canvas 可以显示,但是动画没显示。

    2021-07-29
    有用
    回复
登录 后发表内容