需求：現在有一個小程序抽獎頁面如下，此類抽獎方式為大轉盤（另一種是九宮格）
思路：由服務的獲取：可抽獎次數和獎品列表，利用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和網絡路徑，可能是官方為了縮小項目體積特意為之
2018.10.14更新：
小程序解決canvas頁面移動問題：
https://blog.csdn.net/seven521m/article/details/81629377
//page里面對應的的json文件 { "disableScroll": true }
2019.02.14更新：
近日找到一種終極解決辦法：
1.指針被覆蓋問題：用canvas繪制指針(圖片)即可，覆蓋在表盤的上方，先畫表盤，再畫指針。
2.如何控制表盤轉動起來？就是要解決事件監聽的問題，要求點到指針才轉動，點其他地方不能動，其實很簡單，就是監聽每次點擊，若點擊的x,y坐標在繪制指針的范圍內，就認為點到指針(實際上看頁面上確實點到了)，接着就讓轉盤開動。
3.轉盤如何轉動，實際上canvas有ctx.rotate()，這個api就能實現，因此我們就不必用css嘗試將canvas轉動，后者是行不通的。
4.解決以上三個問題，那么整個大轉盤，就可以完全由canvas去實現，並且效果不錯！