特效描述:利用HTML5实现 Canvas 大转盘 抽奖特效。利用HTML5实现Canvas大转盘抽奖特效
代码结构
1. 引入JS
2. HTML代码
当前浏览器版本过低,请使用其他浏览器尝试
var wheelSurf
// 初始化装盘数据 正常情况下应该由后台返回
var initData = {
"success": true,
"list": [{
"id": 100,
"name": "5000元京东卡",
"image": "images/1.png",
"rank":1,
"percent":3
},
{
"id": 101,
"name": "1000元京东卡",
"image": "images/2.png",
"rank":2,
"percent":5
},
{
"id": 102,
"name": "100个比特币",
"image": "images/3.png",
"rank":3,
"percent":2
},
{
"id": 103,
"name": "50元话费",
"image": "images/4.png",
"rank":4,
"percent":49
},
{
"id": 104,
"name": "100元话费",
"image": "images/5.png",
"rank":5,
"percent":30
},
{
"id": 105,
"name": "500个比特币",
"image": "images/6.png",
"rank":6,
"percent":1
},
{
"id": 106,
"name": "500元京东卡",
"image": "images/7.png",
"rank":7,
"percent":10
}
]
}
// 计算分配获奖概率(前提所有奖品概率相加100%)
function getGift(){
var percent = Math.random()*100
var totalPercent = 0
for(var i = 0 ,l = initData.list.length;i
totalPercent += initData.list[i].percent
if(percent<=totalPercent){
return initData.list[i]
}
}
}
var list = {}
var angel = 360 / initData.list.length
// 格式化成插件需要的奖品列表格式
for (var i = 0, l = initData.list.length; i < l; i++) {
list[initData.list[i].rank] = {
id:initData.list[i].id,
name: initData.list[i].name,
image: initData.list[i].image
}
}
// 查看奖品列表格式
// 定义转盘奖品
wheelSurf = $('#myCanvas').WheelSurf({
list: list, // 奖品 列表,(必填)
outerCircle: {
color: '#df1e15' // 外圈颜色(可选)
},
innerCircle: {
color: '#f4ad26' // 里圈颜色(可选)
},
dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色,默认7彩(可选)
title: {
color: '#5c1e08',
font: '19px Arial'
} // 奖品标题样式(可选)
})
// 初始化转盘
wheelSurf.init()
// 抽奖
var throttle = true;
$("#start").on('click', function () {
var winData = getGift() // 正常情况下获奖信息应该由后台返回
$("#message").html('')
if(!throttle){
return false;
}
throttle = false;
var count = 0
// 计算奖品角度
for (const key in list) {
if (list.hasOwnProperty(key)) {
if (winData.id == list[key].id) {
break;
}
count++
}
}
// 转盘抽奖,
wheelSurf.lottery((count * angel + angel / 2), function () {
$("#message").html(winData.name)
throttle = true;
})
})