HTML5 Canvas大转盘抽奖活动页面代码

js代码

<script src=\"js/turntable.js\"></script>
<script>
	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<l;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;
		})
	})
	
</script>