小程序对 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 这里就不多解释啦，如有错误之处，还希望各位不吝赐教
总结
以上所述是小编给大家介绍的微信小程序利用canvas 绘制幸运大转盘功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: