微信小程序利用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绘制幸运大转盘功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！