效果图
实现思路：
用Canvas画圆，然后再画扇形，然后中奖的开始用一张图片代替，点击的时候触发转动效果。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>活动中心</title>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: none;
width: 100%;
}
body {
background-color: #F6FBF7;
}
</style>
</head>
<body>
<div style="border: solid 1px #ECECEC;font-weight:bold;background-color:white;line-height:50px;text-align:center;margin:0px auto;width:80%;margin-top:20px;">幸运转盘</div>
<div id="number" style="line-height: 50px; font-weight: bold; text-align: center; margin: 0px auto; width: 80%; margin-top: 50px;">????</div>
<div style="width: calc(100wh); margin: 0px auto 0 auto; text-align: center;">
<img onClick="spin();" src="~/Content/H5Game/click.jpg" style="width: 100px; height: 100px; margin: 0px auto; display: block; position: absolute; left: calc(50% - 50px); top: 315px " />
<canvas id="wheelcanvas" width="500" height="500"></canvas>
</div>
<script type="text/javascript">
//颜色
var colors = ["#ED6E40", "#D7363C", "#D5386B", "#B731C4", "#7936D4", "#215ACD", "#4192BE", "#82AD49"];
var restaraunts = [];
var number = 48;//数字，需要12的倍数
for (var i = 1; i <= number; i++) {
restaraunts.push(i);
}
var startAngle = 0;
var arc = Math.PI / (number / 2);
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
// 你指定的数字
var targetNumber = 37;//1=37 2=36 .....37=1, 38=48 39=47.....48=38
//不出现的数据
var hideNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
//数字的对应关系
var targetKeyValue = {};
var ctx;
//初始化数字和对应关系，如果你要得到1，那么数字就是targetKeyValue.1得到的37
for (var i = 1; i <= 37; i++) {
targetKeyValue[i] = 38 - i;
}
for (var i = 1; i <= 11; i++) {
targetKeyValue[37 + i] = 49 - i;
}
//获取随机数
function randomNumber() {
var randomNumber = getRandomInt(1, 48);
//判断如果在不出现的数字内，继续生成一个其他的
while (hideNumber.includes(randomNumber)) {
randomNumber = getRandomInt(1, 48);
}
return targetKeyValue[randomNumber];
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = 200;//外圈大小
var textRadius = 170;//数字显示的位置
var insideRadius = 40;//内圈大小
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
ctx.strokeStyle = "white";//两个圈圈的边框颜色
ctx.lineWidth = 6;//外面圈圈的边框，会影响到显示
ctx.font = ' 14px Microsoft YaHei';//转盘数字，字体，微软雅黑
var colorIndex = 0;
for (var i = 0; i < number; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[colorIndex];
colorIndex++;
if (colorIndex == colors.length - 1) {
colorIndex = 0;
}
ctx.beginPath();
ctx.arc(250, 250, 0, 0, 0, true);//扇形区域的间隔
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 0;
ctx.shadowColor = "";//"rgb(220,220,220)";//字体的阴影
ctx.fillStyle = "#FFFFFF"; //字体颜色
//-2调整字体的位置
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
箭头
//ctx.fillStyle = "black";
//ctx.beginPath();
//ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
//ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
//ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
//ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
//ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
//ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
//ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
//ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
//ctx.fill();
}
}
function spin() {
init();
//点击的时候，指定一个数据
targetNumber = randomNumber();
document.getElementById("number").innerText = "????";
// 计算总旋转角度
//var targetNumber = 1; // 你指定的数字
var targetIndex = restaraunts.indexOf(targetNumber);
var targetAngle = targetIndex * arc;
var totalRotations = 10; // 10圈
var totalAngle = totalRotations * 2 * Math.PI + targetAngle;
spinTime = 0;
spinTimeTotal = 6000; // 旋转时间
rotateWheel(totalAngle);
}
function rotateWheel(totalAngle) {
spinTime += 30;
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
var finalNumber = restaraunts[index];
console.log(finalNumber);
startAngle += (totalAngle - startAngle) * 0.05; // 平滑旋转
drawRouletteWheel();
if (spinTime < spinTimeTotal) {
spinTimeout = setTimeout(function () {
rotateWheel(totalAngle);
}, 30);
} else {
document.getElementById("number").innerText = finalNumber;
}
}
function init() {
// 确保默认停在数字1
var targetIndex = restaraunts.indexOf(37);
var targetAngle = targetIndex * arc;
startAngle = targetAngle;
draw();
}
init();
</script>
</body>
</html>
