小程式對 canvas api 跟h5的不太一致 ，所以這個搞的比較久，不多說，先貼程式碼 Page({
/** * 頁面的初始資料 */ data: { awardsConfig: {}, restaraunts: [], //大轉盤獎品資訊 }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { var self = this; wx.getSystemInfo({ //獲取系統資訊成功，將系統視窗的寬高賦給頁面的寬高 success: function (res) { self.width = res.windowWidth self.height = res.windowHeight } }) self.data.awardsConfig = { chance: true, awards: self.data.restaraunts //存放獎項資訊 } self.tab(); })
}, tab: function() { var self = this;
// 繪製轉盤 var awardsConfig = self.data.awardsConfig.awards, len = awardsConfig.length, rotateDeg = 360 / len / 2 + 90, html = [], turnNum = 1 / len // 文字旋轉 turn 值 self.setData({ btnDisabled: self.data.awardsConfig.chance ? '' : 'disabled' }) var ctx = wx.createContext(); for ( var i = 0; i < len; i++) { var w = self.width; //頁面寬 var r = w * 0.38; //圓半徑 0.35w // 儲存當前狀態 ctx.save(); // 開始一條新路徑 ctx.beginPath(); // 位移到圓心，下面需要圍繞圓心旋轉 // ctx.translate(150, 150); ctx.translate(w / 2 - 14, w / 2 - 18); // 從(0, 0)座標開始定義一條新的子路徑 ctx.moveTo( 0, 0); // 旋轉弧度,需將角度轉換為弧度,使用 degrees * Math.PI/180 公式進行計算。 ctx.rotate(( 360 / len * i - rotateDeg) * Math.PI / 180); // 繪製圓弧 ctx.arc( 0, 0, r, 0, 2 * Math.PI / len, false);
// 顏色間隔 if (i % 2 == 0) { ctx.setFillStyle( '#ffffff'); } else { ctx.setFillStyle( '#ffeab0'); }
// 填充扇形 ctx.fill(); // 繪製邊框 ctx.setLineWidth( 0.5); ctx.setStrokeStyle( '#e4370e'); ctx.stroke();
// 恢復前一個狀態 ctx.restore();
// 獎項列表 html.push({ turn: (i + 1) * turnNum + 'turn', award: awardsConfig[i] }); } self.setData({ awardsList: html });
wx.drawCanvas({ canvasId: 'canvas', actions: ctx.getActions() }) }, inner: function(e) { const self = this; if (self.data.awardsConfig.chance) {
self.data.awardsConfig.chance = false; //轉動時禁止再次觸發點選事件 var json = res.data; //後端自動分配獎項，並傳給前端獎項資訊 var item = parseInt(json.grade); //獲取從1到獎品數量之間的隨機數
self.getLottery(item + 1, self.data.restaraunts[item]); //獎項位置 （+1 是為了轉動的時候計算角度），對應獎項
}
}, getLottery: function(item, txt) { var self = this var awardsConfig = self.data.awardsConfig.awards, len = awardsConfig.length; var awardIndex = item; // 獲取獎品配置 var awardsConfig = self.data.awardsConfig if (awardIndex < 2) awardsConfig.chance = false
// 初始化 rotate var animationInit = wx.createAnimation({ duration: 1 }) this.animationInit = animationInit; animationInit.rotate( 0).step() this.setData({ animationData: animationInit.export(), btnDisabled: 'disabled' }) // 旋轉抽獎 執行動畫效果 setTimeout( function () { var animationRun = wx.createAnimation({ duration: 4000, timingFunction: 'ease' }) self.animationRun = animationRun animationRun.rotate( 0 - ( 360 * 8 - awardIndex * ( 360 / len))).step() self.setData({ animationData: animationRun.export() }) }, 100) // 記錄獎品 var winAwards = wx.getStorageSync( 'winAwards') || { data: [] } var textInfo = txt === "謝謝參與" ? txt : txt + '1個'; winAwards.data.push(textInfo) wx.setStorageSync( 'winAwards', winAwards) var jh = parseInt(self.data.jh) - 1; // 中獎提示 setTimeout( function () { if (txt === "謝謝參與") { wx.showModal({ title: '很遺憾', content: '祝您好運', showCancel: false }) } else { wx.showModal({ title: '恭喜', content: '獲得' + txt, showCancel: false }) }
self.data.awardsConfig.chance = true; if (awardsConfig.chance) { self.setData({ btnDisabled: '' }) } }, 4100); },
function(err) { console.log(err) console.log( "err") //error }) }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function() { // this.drawTurntable(this, new Date()); },
/** * 生命週期函式--監聽頁面顯示 */ onShow: function() {
},
/** * 生命週期函式--監聽頁面隱藏 */ onHide: function() {
},
/** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function() {
},
/** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function() {
},
/** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function() {
},
/** * 使用者點選右上角分享 */ onShareAppMessage: function() {
} })

小程式 canvas 層級永遠在最上級，如果想要設定在canvas上面 就需要用到web-view 或者 web-image 這樣就能居於canvas 上層了 ，具體可以去檢視下小程式的api 搜尋web-view 這裡就不多解釋啦，如有錯誤之處，還希望各位不吝賜教