1.html
<view class="canvas-container">
<view animation="{{animationData}}" class="canvas-content" >
<canvas style="width: 300px; height: 300px;" class="canvas-element" canvas-id="lotteryCanvas"></canvas>
<view class="canvas-list" wx:for="{{awardsList}}" wx:key="unique">
<view class="canvas-item">
<text class="canvas-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})">{{item.award}}</text>
</view>
</view>
</view>
<view bindtap="getLottery" class="canvas-btn {{btnDisabled}}">抽奖</view>
</view>
2.css
/* 转盘 */
.canvas-container ul,
.canvas-container li{
margin: 0 ;
padding: 0;
list-style: none;
}
.canvas-container{
margin: 0 auto;
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid #E44025;
box-shadow: 0 2px 3px #333,0 0 2px #000;
}
.canvas-content{
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: block;
width: inherit;
height: inherit;
border-radius: inherit;
background-clip: padding-box;
background-color: #ffcb3f;
}
.canvas-element{
width: inherit;
height: inherit;
border-radius: 50%;
}
.canvas-list{
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
z-index: 2;
}
.canvas-item{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #e4370e;
font-weight: bold;
text-shadow: 0 1px 1px rgba(255,255,255,.6);
}
.canvas-item-text{
position: relative;
display: block;
padding-top: 20px;
/* width: 50px; */
margin: 0 auto;
text-align: center;
-webkit-transform-origin: 50% 150px;
transform-origin: 50% 150px;
}
.canvas-btn{
position: absolute;
left: 110px;
top: 110px;
z-index: 3;
width: 80px;
height: 80px;
border-radius: 50%;
color: #F4E9CC;
background-color: #E44025;
line-height: 80px;
text-align: center;
font-size: 20px;
text-shadow: 0 -1px 1px rgba(0,0,0,.6);
box-shadow: 0 3px 5px rgba(0,0,0,.6);
text-decoration: none;
}
.canvas-btn::after{
position: absolute;
display: block;
content: ' ';
left: 10px;
top: -46px;
width: 0;
height: 0;
overflow: hidden;
border-width: 30px;
border-style: solid;
border-color: transparent;
border-bottom-color: #E44025;
}
.canvas-btn.disabled{
pointer-events: none;
background: #B07A7B;
color: #ccc;
}
.canvas-btn.disabled::after{
border-bottom-color: #B07A7B;
}
.gb-run{
-webkit-transition: all 6s ease;
transition: all 6s ease;
}
/* 查看中奖 */
.main-container{
margin: 1rem 2rem;
}
.main-container-rule{
padding: 1rem 0;
}
.main-rule-title{
display: block;
padding: 4px 0;
font-size: 16px;
font-weight: bold;
}
.main-rule-item{
display: block;
padding: 2px 0;
}
.main-container-btn{
display: flex;
justify-content: center;
}
3.js
data: {
awardsList: {},
animationData: {},
btnDisabled: '',
awards:[],
prob:[],
}
图1
图2
onReady: function (e) {
var that = this;
// 获取数据，如图1，
app.util.request({
url: xxxxxxxxxx",
cachetime: "0",
data: {},
success: function(n) {
// 把获取出来的概率数据循环复制一份到prob,概率数据保持整数，如图2
let prob=[];
for(let i=0;i<n.data.data.length;i++){
if (n.data.data[i].prob!=0) {
for(let k=0;k<n.data.data[i].prob;k++){
prob.push(n.data.data[i].prob)
}
}
};
// 打乱prob数组,
prob.sort(function() {
return (0.5-Math.random());
});
that.setData({
awards:n.data.data,
prob:prob,
});
// 绘制转盘
var awardsConfig = that.data.awards,len = awardsConfig.length,rotateDeg = 360 / len / 2 + 90,html = [],turnNum = 1 / len // 文字旋转 turn 值
that.setData({
btnDisabled: that.data.chance ? '' : 'disabled'
})
var ctx = wx.createContext()
for (var i = 0; i < len; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(150, 150);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180);
// 绘制圆弧
ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false);
// 颜色间隔
if (i % 2 == 0) {
ctx.setFillStyle('#ffb820');
}else{
ctx.setFillStyle('#ffcb3f');
}
// 填充扇形
ctx.fill();
// 绘制边框
ctx.setLineWidth(0.5);
ctx.setStrokeStyle('#e4370e');
ctx.stroke();
// 恢复前一个状态
ctx.restore();
// 奖项列表
html.push({turn: i * turnNum + 'turn', award: awardsConfig[i].name});
}
that.setData({
awardsList: html
});
wx.drawCanvas({
canvasId: 'lotteryCanvas',
actions: ctx.getActions()
})
}
});
},
// 点击抽奖
getLottery: function () {
var that = this
// 随机prob数组的下标拿到prob的值
let Snum = Math.floor(Math.random()*that.data.prob.length);
that.query(that.data.prob[Snum]);
},
// 获取奖品数据以及下标，
query(snum){
let that=this;
let arr=[];
for(let i=0;i<that.data.awards.length;i++){
if (that.data.awards[i].prob==snum) {
arr.push(that.data.awards[i])
}
};
// 判断arr的数组是否含有相同概率的元素，然后根据name来匹配awards奖品数组中的name，返回awards数组的下标，如需判断根据奖品数量是否被抽完，则需要在加一层if，重新执行一边getLottery()方法即可，
if (arr.length==1) {
// console.log(arr[0].name);
for (let i in that.data.awards) {
if (that.data.awards[i].name==arr[0].name) {
this.Statr(i)
}
};
} else {
let Snum = Math.floor(Math.random() * arr.length);
// console.log(arr[Snum].name);
for (let i in that.data.awards) {
if (that.data.awards[i].name==arr[Snum].name) {
this.Statr(i)
}
};
}
},
// 开始抽奖
Statr(Snum){
let that=this;
var awardIndex = Snum;
// var awardIndex = Math.random() * 6 >>> 0;
// 获取奖品配置
var awardsConfig = that.data.awards
if (awardIndex < 2) that.data.chance = false
// console.log(awardIndex)
// 初始化 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'
})
that.animationRun = animationRun
animationRun.rotate(360 * 8 - awardIndex * (360 / 6)).step()
that.setData({
animationData: animationRun.export()
})
}, 100)
// 中奖提示
setTimeout(function() {
wx.showModal({
title: '恭喜',
content: '获得' + (awardsConfig[awardIndex].name),
showCancel: false
})
if (that.data.chance) {
that.setData({
btnDisabled: ''
})
}
}, 4100);
},
网友评论