年会抽奖的仪式感
年会上最激动人心的环节是什么？当然是抽奖！但很多公司用的抽奖工具要么丑、要么要收费、要么不好用。今天我们自己做一个转盘抽奖，好看、免费、还能自定义奖品。
整体设计
我们的转盘会用Canvas来画，这是浏览器自带的"画布"功能。想象一下：画一个圆形，分成若干扇形，每个扇形写上奖品名称。点击按钮，转盘开始旋转，越来越慢，最后停在某个奖品上。
第一步：创建页面
幸运大转盘
第二步：画转盘
var canvas = document.getElementById("wheel");
var ctx = canvas.getContext("2d");
var prizes = [
"一等奖 iPhone",
"二等奖 耳机",
"三等奖 充电宝",
"四等奖 马克杯",
"五等奖 笔记本",
"谢谢参与",
"六等奖 钥匙扣",
"幸运奖 零食大礼包"
];
var colors = [
"#e74c3c","#3498db","#2ecc71","#f39c12",
"#9b59b6","#1abc9c","#e67e22","#34495e"
];
var currentAngle = 0;
function drawWheel() {
var sliceAngle = 2 * Math.PI / prizes.length;
for (var i = 0; i < prizes.length; i++) {
var startAngle = currentAngle + i * sliceAngle;
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.arc(200, 200, 190, startAngle,
startAngle + sliceAngle);
ctx.fillStyle = colors[i];
ctx.fill();
ctx.stroke();
// 写奖品名
ctx.save();
ctx.translate(200, 200);
ctx.rotate(startAngle + sliceAngle / 2);
ctx.fillStyle = "#fff";
ctx.font = "14px sans-serif";
ctx.fillText(prizes[i], 50, 5);
ctx.restore();
}
}
drawWheel();
Canvas画图的原理就像用圆规和尺子在纸上画：先确定圆心位置，再一个一个画扇形，每个扇形涂不同的颜色。
第三步：让转盘转起来
var spinning = false;
function spin() {
if (spinning) return;
spinning = true;
document.getElementById("result").textContent = "";
var totalRotation = Math.random() * 360 + 1800;
var duration = 4000;
var startTime = Date.now();
var startAngle = currentAngle;
function animate() {
var elapsed = Date.now() - startTime;
var progress = Math.min(elapsed / duration, 1);
// 缓动效果：越转越慢
var ease = 1 - Math.pow(1 - progress, 3);
currentAngle = startAngle +
(totalRotation * Math.PI / 180) * ease;
ctx.clearRect(0, 0, 400, 400);
drawWheel();
if (progress < 1) {
requestAnimationFrame(animate);
} else {
spinning = false;
showResult();
}
}
animate();
}
缓动效果是关键——转盘不是匀速停下的，而是越来越慢，这样才有悬念感。
第四步：显示中奖结果
function showResult() {
var sliceAngle = 360 / prizes.length;
var degrees = (currentAngle * 180 / Math.PI) % 360;
var index = Math.floor(
((360 - degrees) % 360) / sliceAngle
);
document.getElementById("result").textContent =
"恭喜获得：" + prizes[index];
}
怎么用
修改prizes数组里的奖品名称就能自定义奖品。颜色也可以随便改。如果要在年会现场用，打开浏览器全屏显示，投影到大屏幕上，效果拉满。
这个转盘纯前端实现，不需要服务器。把文件发给同事，双击就能打开，方便到不行。