以下是一个简单的 h5 大转盘抽奖的示例代码：
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大转盘抽奖</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
#canvas {
display: block;
margin: 50px auto;
width: 300px;
height: 300px;
background: url('bg.png') no-repeat center center;
background-size: 100%;
}
#pointer {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 100px;
margin-top: -50px;
margin-left: -5px;
background-color: #ff0000;
transform-origin: bottom center;
transition: transform 5s ease-in-out;
}
#btn {
display: block;
margin: 50px auto;
padding: 10px 20px;
font-size: 20px;
color: #fff;
background-color: #ff0000;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<span id="pointer"></span>
<button id="btn">开始抽奖</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="prize.js"></script>
<script>
var canvas = document.getElementById('canvas');
var pointer = document.getElementById('pointer');
var btn = document.getElementById('btn');
var ctx = canvas.getContext('2d');
var pointerDeg = 0;
var spinning = false;
var prizes = [
{
title: "一等奖",
color: "#eaeaea"
},
{
title: "二等奖",
color: "#f5f5f5"
},
{
title: "三等奖",
color: "#eaeaea"
},
{
title: "四等奖",
color: "#f5f5f5"
},
{
title: "五等奖",
color: "#eaeaea"
},
{
title: "六等奖",
color: "#f5f5f5"
},
{
title: "七等奖",
color: "#eaeaea"
},
{
title: "八等奖",
color: "#f5f5f5"
}
];
function drawPrize() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = Math.min(x, y) - 10;
var angle = Math.PI * 2 / prizes.length;
ctx.beginPath();
for (var i = 0; i < prizes.length; i++) {
var startAngle = i * angle - Math.PI / 2;
var endAngle = (i + 1) * angle - Math.PI / 2;
ctx.arc(x, y, radius, startAngle, endAngle, false);
ctx.fillStyle = prizes[i].color;
ctx.fill();
ctx.save();
ctx.translate(x, y);
ctx.rotate(i * angle);
ctx.font = "bold 20px Arial";
ctx.fillStyle = "#ff0000";
ctx.textAlign = "center";
ctx.fillText(prizes[i].title, radius * 0.4, 0);
ctx.restore();
}
}
function rotatePointer() {
var deg = _.random(360, 720);
pointerDeg += deg;
pointer.style.transform = 'rotate(' + pointerDeg + 'deg)';
pointer.addEventListener('transitionend', function() {
spining = false;
var prize = Math.floor(pointerDeg / (360 / prizes.length)) % prizes.length;
alert('恭喜您抽中了' + prizes[prize].title);
}, false);
}
drawPrize();
btn.addEventListener('click', function() {
if (!spining) {
spining = true;
rotatePointer();
}
});
</script>
</body>
</html>
```
CSS:
```css
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
#canvas {
display: block;
margin: 50px auto;
width: 300px;
height: 300px;
background: url('bg.png') no-repeat center center;
background-size: 100%;
}
#pointer {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 100px;
margin-top: -50px;
margin-left: -5px;
background-color: #ff0000;
transform-origin: bottom center;
transition: transform 5s ease-in-out;
}
#btn {
display: block;
margin: 50px auto;
padding: 10px 20px;
font-size: 20px;
color: #fff;
background-color: #ff0000;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
```
JavaScript:
```javascript
var canvas = document.getElementById('canvas');
var pointer = document.getElementById('pointer');
var btn = document.getElementById('btn');
var ctx = canvas.getContext('2d');
var pointerDeg = 0;
var spinning = false;
var prizes = [
{
title: "一等奖",
color: "#eaeaea"
},
{
title: "二等奖",
color: "#f5f5f5"
},
{
title: "三等奖",
color: "#eaeaea"
},
{
title: "四等奖",
color: "#f5f5f5"
},
{
title: "五等奖",
color: "#eaeaea"
},
{
title: "六等奖",
color: "#f5f5f5"
},
{
title: "七等奖",
color: "#eaeaea"
},
{
title: "八等奖",
color: "#f5f5f5"
}
];
function drawPrize() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = Math.min(x, y) - 10;
var angle = Math.PI * 2 / prizes.length;
ctx.beginPath();
for (var i = 0; i < prizes.length; i++) {
var startAngle = i * angle - Math.PI / 2;
var endAngle = (i + 1) * angle - Math.PI / 2;
ctx.arc(x, y, radius, startAngle, endAngle, false);
ctx.fillStyle = prizes[i].color;
ctx.fill();
ctx.save();
ctx.translate(x, y);
ctx.rotate(i * angle);
ctx.font = "bold 20px Arial";
ctx.fillStyle = "#ff0000";
ctx.textAlign = "center";
ctx.fillText(prizes[i].title, radius * 0.4, 0);
ctx.restore();
}
}
function rotatePointer() {
var deg = _.random(360, 720);
pointerDeg += deg;
pointer.style.transform = 'rotate(' + pointerDeg + 'deg)';
pointer.addEventListener('transitionend', function() {
spining = false;
var prize = Math.floor(pointerDeg / (360 / prizes.length)) % prizes.length;
alert('恭喜您抽中了' + prizes[prize].title);
}, false);
}
drawPrize();
btn.addEventListener('click', function() {
if (!spining) {
spining = true;
rotatePointer();
}
});
```
注意：
以上代码使用了 jQuery, Velocity 和 lodash 库，请先在引入代码前引入这些库。
以上示例代码仅供参考，实际项目中可能需要根据具体需求进行修改，如更改奖品数量、奖品内容、转盘样式等。
798
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
