微信小程序利用canvas 繪制幸運(yùn)大轉(zhuǎn)盤功能
小程序?qū)?canvas api 跟h5的不太一致 ,所以這個(gè)搞的比較久,不多說,先貼代碼
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ù)前一個(gè)狀態(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)動時(shí)禁止再次觸發(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)動的時(shí)候計(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個(gè)'; 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() { } })
小程序 canvas 層級永遠(yuǎn)在最上級,如果想要設(shè)置在canvas上面 就需要用到web-view 或者 web-image 這樣就能居于canvas 上層了 ,具體可以去查看下小程序的api 搜索web-view 這里就不多解釋啦,如有錯(cuò)誤之處,還希望各位不吝賜教
總結(jié)
以上所述是小編給大家介紹的微信小程序利用canvas 繪制幸運(yùn)大轉(zhuǎn)盤功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本)
這篇文章主要介紹了D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本) ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05JavaScript實(shí)現(xiàn)網(wǎng)頁跨年倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁跨年倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12elementUI?Table?自定義表頭動態(tài)數(shù)據(jù)及插槽的操作
本文介紹了如何實(shí)現(xiàn)一個(gè)高度自定義的列表界面,其中表格的表頭由后端返回,并且允許用戶根據(jù)需求自定義表頭和數(shù)據(jù)展示樣式,本文給大家介紹elementUI?Table?自定義表頭動態(tài)數(shù)據(jù)及插槽的操作,感興趣的朋友跟隨小編一起看看吧2024-10-10關(guān)于JavaScript實(shí)現(xiàn)動畫時(shí)動畫抖動的原因與解決方法
最近在使用JS動畫做一些練習(xí)的時(shí)候我發(fā)現(xiàn)在動畫執(zhí)行時(shí)間內(nèi)快速移開鼠標(biāo)時(shí)會出現(xiàn)動畫因鼠標(biāo)移動過快從而導(dǎo)致代碼沖突讓畫面抖動的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)動畫時(shí)動畫抖動的原因與解決方法,需要的朋友可以參考下2022-06-06JavaScript hasOwnProperty() 函數(shù)實(shí)例詳解
hasOwnProperty()函數(shù)用于指示一個(gè)對象自身(不包括原型鏈)是否具有指定名稱的屬性。下面通過本文給大家分享JavaScript hasOwnProperty() 函數(shù)實(shí)例講解,感興趣的朋友一起看看吧2017-08-08通過javascript的匿名函數(shù)來分析幾段簡單有趣的代碼
想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷,也曾經(jīng)碰到過幾個(gè)由匿名函數(shù)造成的困擾(其中一個(gè)就是由閉包引起的),下面就整理幾段簡單代碼討論一下,讓我們大家一起進(jìn)步。2010-06-06小心!AngularJS結(jié)合RequireJS做文件合并壓縮的那些坑
小心!AngularJS結(jié)合RequireJS做文件合并壓縮的那些坑,大家在做文件合并壓縮的時(shí)候一定要注意,感興趣的朋友可以參考一下2016-01-01JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法
這篇文章主要介紹了JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法,本文給出操作實(shí)例代碼和語法介紹,需要的朋友可以參考下2015-05-05