问题: 父容器中使用了一个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 >
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
系统版本号:Android 11
小程序调试基础库:2.10.4 是好的。 更新的版本无法显示。
代码是taro写的,需要用live-plear包裹起来。
const ctx1 = wx.createCanvasContext('cvs1')
ctx1.beginPath()
ctx1.setLineWidth(3)
ctx1.setStrokeStyle('#d9d9d9')
ctx1.arc(81, 81, 80, 0, 2 * Math.PI, false)
ctx1.stroke()
ctx1.draw()
尽快看下吧,不行了加我微信orQQ远程调试一下。谢谢了。
总结以下这个问题发生的原因:
1、canvas动画不显示,是因为使用的api在基础库2.11.0 以后不支持了。 故重新调整了代码,才显示了出来,示例如下:
2、动画显示后,发现画的圆在真机上是椭圆的,并且宽高不对。 这里自己写了一个rpxTopx的方法,在界面初始化, 以及每次绘制圆的时候转换宽高。
ctx1.beginPath()
ctx1.lineWidth = 3
ctx1.strokeStyle = '#d9d9d9'
ctx1.arc(XYPoint, XYPoint, R, 0, 2 * Math.PI, false)
ctx1.stroke()
})
}
// rpxtopx 方法
export default function rpxToPx(rpx) {
const orientation = wx.getSystemInfoSync().deviceOrientation
if (orientation == 'landscape') {
return Math.round(rpx * wx.getSystemInfoSync().windowHeight / 750)
}
return Math.round(rpx * wx.getSystemInfoSync().windowWidth / 750)
}
// render前宽高转换
const _pixel = rpxToPx(basePx)
return <View
style={`width: ${_pixel}px; height: ${_pixel}px;`}
className="countdown-container flex flex-item-center flex-justify-center">
<Canvas style={`width: ${_pixel}px; height: ${_pixel}px;z-index: 0;`} id="cvs1" type="2d"></Canvas>
<Canvas style={`width: ${_pixel}px; height: ${_pixel}px;z-index: 1;`} id="cvs2" type="2d"></Canvas>
<Canvas style={`width: ${_pixel}px; height: ${_pixel}px;z-index: 2;`} id="cvs3" type="2d"></Canvas>
<View className="flex flex-col flex-justify-center flex-item-center">
<View className="timer-count flex flex-item-center flex-justify-center"> {count} </View>
<View className="timer-tips flex flex-item-center" > 倒计时 (S) </View>
</View>
</View >
补充一下安卓的测试效果, canvas 可以显示,但是动画没显示。