您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)微信小程序如何利用canvas繪制幸運(yùn)大轉(zhuǎn)盤功能的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
代碼如下
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { awardsConfig: {}, restaraunts: [], //大轉(zhuǎn)盤獎品信息 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { var self = this; wx.getSystemInfo({ //獲取系統(tǒng)信息成功,將系統(tǒng)窗口的寬高賦給頁面的寬高 success: function (res) { self.width = res.windowWidth self.height = res.windowHeight } }) self.data.awardsConfig = { chance: true, awards: self.data.restaraunts//存放獎項(xiàng)信息 } self.tab(); }) }, tab: function() { var self = this; // 繪制轉(zhuǎn)盤 var awardsConfig = self.data.awardsConfig.awards, len = awardsConfig.length, rotateDeg = 360 / len / 2 + 90, html = [], turnNum = 1 / len // 文字旋轉(zhuǎn) 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 // 保存當(dāng)前狀態(tài) ctx.save(); // 開始一條新路徑 ctx.beginPath(); // 位移到圓心,下面需要圍繞圓心旋轉(zhuǎn) // ctx.translate(150, 150); ctx.translate(w / 2 - 14, w / 2 - 18); // 從(0, 0)坐標(biāo)開始定義一條新的子路徑 ctx.moveTo(0, 0); // 旋轉(zhuǎn)弧度,需將角度轉(zhuǎn)換為弧度,使用 degrees * Math.PI/180 公式進(jìn)行計(jì)算。 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(); // 恢復(fù)前一個狀態(tài) ctx.restore(); // 獎項(xiàng)列表 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;//轉(zhuǎn)動時禁止再次觸發(fā)點(diǎn)擊事件 var json = res.data;//后端自動分配獎項(xiàng),并傳給前端獎項(xiàng)信息 var item = parseInt(json.grade); //獲取從1到獎品數(shù)量之間的隨機(jī)數(shù) self.getLottery(item + 1, self.data.restaraunts[item]); //獎項(xiàng)位置 (+1 是為了轉(zhuǎn)動的時候計(jì)算角度),對應(yīng)獎項(xiàng) } }, 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' }) // 旋轉(zhuǎn)抽獎 執(zhí)行動畫效果 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: '祝您好運(yùn)', 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 }) }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function() { // this.drawTurntable(this, new Date()); }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function() { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function() { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function() { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function() { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function() { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function() { } })
感謝各位的閱讀!關(guān)于“微信小程序如何利用canvas繪制幸運(yùn)大轉(zhuǎn)盤功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。