需求：现在有一个小程序抽奖页面如下，此类抽奖方式为大转盘（另一种是九宫格）
思路：由服务的获取：可抽奖次数和奖品列表，利用canvas渲染每一奖品分区背景，利用rotate和for呈现各分区奖品名，最后利用小程序动画animation将转盘转起来，思路很好，但是真机运行如下：
存在问题：
1.抽奖按钮没了
2. 奖品没有出来
3.点击抽奖时点击事件有效，但是没有动画也没有调用方法里的接口，控制台显示：
Invoke event getLottery in page: pages/lottery/lottery
4.值得一提的是，所有问题在小程序IDE的模拟器上，都不会出现，只在真机出现，我测试的机型是：Xiaomi MI-MAX
查看官方文档后发现：
1.原来一切都是层级问题，抽奖按钮被挡了，奖品也出来了只是被挡了
原生组件限制：https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
当我用cover-view和cover-image解决层级问题后，实际上虽然按钮看得见，但是点击无效，只有将按钮移到canvas区域外点击才有效。另外，即使点击抽奖成功后，还是没有转动的动画，但是抽奖请求是成功的发了出去并且成功地抽了奖。抽奖成功提示奖品名弹层出现后，canvas就移位了，如下：
使用cover后，只是显示正常：
抽奖后，canvas的变化（123232是我随便写的一个按钮，用于在canvas外触发抽奖事件）：
坑是真的多！
这是小程序的BUG，还真是无能为力，不过我的项目已经交付了，大家来看另外解决方案的效果：
区别是什么？
1.我把canvas去掉了，背景设置整个圆型DIV的background-color为蓝色
2.利用rotate+wx:for渲染奖品名和分割线，给人一种分区域的感觉，动画依然采用animation
还有什么可以改进的地方？
我把canvas保留下来，日后修复bug后还可以使用，对于整块蓝色，显然不好看，所以可以配合ui设置背景图片，值得注意的是，小程序背景图片只支持base64和网络路径，可能是官方为了缩小项目体积特意为之