lucky-canvas
lucky-canvas copied to clipboard
Taro lucky-canvas 获取不到 canvas 标签
- 你当前是什么框架(必填):vue3 + Taro H5, 版本3.4.13
- 你使用的是哪个包(必填):@lucky-canvas/taro": "^0.0.14
- 你当前插件的版本(必填):@lucky-canvas/taro": "^0.0.14
- 当前环境是小程序还是浏览器(选填):vue3 + Taro H5, 版本3.4.13
- 详细描述你的bug:刷新浏览器,有的时候正常,有的时候就报 “lucky-canvas 获取不到 canvas 标签”
- 问题代码(重要):没有问题代码,按照官方文档那么写就偶发性的报错
// 代码开始, 别再放歪了行吗
<LuckyWheel
ref="myLucky"
:prizes="prizes"
:blocks="blocks"
:buttons="buttons"
@start="startCallback"
@end="endCallback"
></LuckyWheel>
const myLucky = ref<any>(null);
const blocks = ref([{ padding: pxTransform(6), background: '#FFDDA0' }]);
const prizes = ref([
{ fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
{ fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
{ fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
{ fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
{ fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
{ fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
])
const buttons = ref([
{
radius: pxTransform(80), background: 'none',
fonts: [
{ text: '抽奖', top: pxTransform(-45), fontColor: '#fff', fontStyle: 'JDLangZhengTi', fontWeight: 600, fontSize: pxTransform(54) },
{ text: '还剩10次', top: pxTransform(18), fontColor: '#fff', fontStyle: 'PingFang SC', fontWeight: 400, fontSize: pxTransform(18) },
],
imgs: [
{
width: pxTransform(200),
height: pxTransform(250),
top: pxTransform(-140),
src: require('@/assets/image/activity/turntable/pointer.png')
}
]
}
])
// 点击抽奖按钮会触发star回调
const startCallback = () => {
myLucky.value.play();
setTimeout(() => {
const index = 7;
myLucky.value.stop(index)
}, 2000);
}
// 抽奖结束会触发end回调
const endCallback = (prize: any) => {
prizeResultInfo.visible = true;
prizeResultInfo.type = prize.fonts[0].type;
prizeResultInfo.name = prize.fonts[0].text;
prizeResultInfo.img = prize.imgs[0].src;
}
// 代码结束