纯代码帮我写一个简单的转盘
时间: 2023-07-29 10:09:07 浏览: 46
好的,以下是一个简单的转盘的代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>转盘</title>
<style type="text/css">
#canvas {
width: 500px;
height: 500px;
background-color: #fff;
margin: 0 auto;
position: relative;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#pointer {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
z-index: 999;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="pointer"></div>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var items = ['1', '2', '3', '4', '5', '6', '7', '8'];
var colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4'];
var startAngle = 0;
var arc = Math.PI / 4;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var pointer = document.getElementById('pointer');
var spinButton = document.getElementById('spin');
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = 'bold 20px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('转盘', canvas.width / 2, 30);
for (var i = 0; i < items.length; i++) {
var angle = startAngle + i * arc;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 200, angle, angle + arc, false);
ctx.lineTo(canvas.width / 2, canvas.height / 2);
ctx.fillStyle = colors[i];
ctx.fill();
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle + arc / 2 + Math.PI / 8);
ctx.fillStyle = '#fff';
ctx.fillText(items[i], 170, 0);
ctx.restore();
}
startAngle += arc;
}
function spin() {
spinButton.disabled = true;
spinTime = 0;
spinTimeTotal = Math.floor(Math.random() * 10) * 1000 + 5000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if (spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinArcStart - easeOut(spinTime, 0, spinArcStart, spinTimeTotal);
startAngle += spinAngle * Math.PI / 180;
draw();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 50px sans-serif';
ctx.textAlign = 'center';
ctx.fillStyle = '#000';
ctx.fillText(items[index], canvas.width / 2, canvas.height / 2 + 10);
ctx.restore();
spinButton.disabled = false;
}
function easeOut(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
draw();
</script>
</body>
</html>
```
这个转盘包含了8个选项,每个选项的背景色不同,文字显示在选项的中间。点击红色指针可以开始旋转转盘,转盘会随机旋转一段时间后停止,最终指针指向的是选项中的一个。