微信小程序利用canvas 绘制幸运大转盘功能
小程序对canvasapi跟h5的不太一致,所以这个搞的比较久,不多说,先贴代码
Page({ /** *页面的初始数据 */ data:{ awardsConfig:{}, restaraunts:[],//大转盘奖品信息 }, /** *生命周期函数--监听页面加载 */ onLoad:function(options){ varself=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(){ varself=this; //绘制转盘 varawardsConfig=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' }) varctx=wx.createContext(); for(vari=0;i小程序canvas层级永远在最上级,如果想要设置在canvas上面就需要用到web-view或者web-image这样就能居于canvas上层了,具体可以去查看下小程序的api搜索web-view这里就不多解释啦,如有错误之处,还希望各位不吝赐教
总结
以上所述是小编给大家介绍的微信小程序利用canvas绘制幸运大转盘功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!