HTML5大轉盤抽獎特效，是一種常見的互動活動形式，也是商家常用的促銷方式之一。下面是一個簡單實用的HTML5大轉盤抽獎特效代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5大轉盤抽獎特效</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
</canvas>
<button onclick="start()">開始抽獎</button>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var colors = ['#000000', '#FF0D0D', '#FFBF00', '#FFFD0D', '#00FF01', '#00FFFF', '#0000FF', '#FF00FF', '#B404AE'];
var options = ['恭喜中獎', '再來一次', '10元紅包', '50元代金券', '20元話費', '30元京東卡', '200元禮品卡', 'iPhone X', '謝謝參與'];
var angle = 0;
var startAngle = 0;
var endAngle = 0;
function draw() {
ctx.clearRect(0, 0, 500, 500);
var x = canvas.width / 2;
var y = canvas.height / 2;
var r = 200;
angle += Math.PI / 180;
startAngle += Math.PI / 180;
endAngle = angle;
ctx.beginPath();
for (var i = 0; i < 9; i++) {
ctx.fillStyle = colors[i];
ctx.moveTo(x, y);
ctx.arc(x, y, r, startAngle, endAngle, false);
ctx.fill();
startAngle = endAngle;
endAngle += Math.PI / 4;
ctx.save();
ctx.translate(x, y);
ctx.rotate(startAngle);
ctx.fillStyle = "#FFFFFF";
ctx.font = "30px Arial";
ctx.fillText(options[i], -15, 15);
ctx.restore();
}
}
function start() {
var randomItem = Math.floor(Math.random() * options.length);
var randomCount = Math.floor(Math.random() * 8 + 8);
var deg = 0;
var id = setInterval(function () {
deg += 10;
canvas.style.transform = "rotate(" + deg + "deg)";
if (deg == randomCount * 45) {
clearInterval(id);
alert(options[randomItem]);
deg = deg % 360;
canvas.style.transform = "rotate(" + deg + "deg)";
}
}, 30);
}
draw();
</script>
</body>
</html>以上是HTML5大轉盤抽獎特效的代碼，代碼中首先定義了一個canvas畫布，并且定義了轉盤的樣式和獎項。在draw()函數中，定義了每個扇形的參數，同時也定義了每個轉盤區域的位置和大小。start()函數是用來啟動轉盤旋轉的，利用setInterval函數來模擬轉盤旋轉的過程。