本文详细介绍两种基于JavaScript的常见抽奖实现方案：转盘抽奖与宫格抽奖。通过Canvas绘制扇形与奖品，结合CSS3 transform实现平滑旋转动画；宫格抽奖则通过动态计算行列布局与坐标，利用DOM操作切换选中样式。文章提供核心代码片段及逻辑解析，帮助开发者快速掌握前端抽奖功能的实现细节。
前言
本文所述的实现思路均为作者独立构思，可能与市面上其他方案存在差异，且未必是性能最优解。
仅供参考，欢迎理性交流。
第一种方案：转盘抽奖
实现思路
1、利用Canvas API绘制转盘背景，其中arc()方法用于生成扇形区域，drawImage()用于渲染奖品图片。
2、借助CSS3的transform属性，具体使用rotate指令来实现转盘的旋转动画效果。
实现效果
核心代码
绘制转盘的方法实现如下：
（具体数值需根据实际画布尺寸进行调整，此处示例中画布尺寸为401px）。
// 绘制转盘
function drawBg() {
var one_angle = Math.PI * 2 / prize.length;
var start_angle = -Math.PI / 2 - one_angle / 2
ctx.translate(200.5, 200.5);
ctx.arc(0, 0, 200, 0, Math.PI * 2, false);
ctx.stroke()
//绘制扇形
prize.forEach((item, i) => {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, 200, start_angle + one_angle * i, start_angle + one_angle * (i + 1), false);
if (i % 2 == 0) {
ctx.fillStyle = "rgba(230,186,127,1)"
} else {
ctx.fillStyle = "rgba(210,156,97,1)"
}
ctx.fill()
// 绘制奖品
var newImg = new Image()
newImg.src = prize[i].img
newImg.onload = function() {
ctx.rotate(one_angle * i);
ctx.fillStyle = "rgba(0,0,0,1)"
//ctx.font = '16px Microsoft YaHei';
ctx.drawImage(newImg, 0, 0, 232, 200, -27, -190, 54, 54)
//ctx.fillText(prize[i].name, -ctx.measureText(prize[i].name).width / 2, -112)
ctx.rotate(-one_angle * i);
}
ctx.save();
})
}
执行抽奖逻辑的方法：
function luckyDraw(activeIndex) {
// 旋转几圈
var turnNum = 4
// 当前选中下标
var currentIndex = prize.length - (window.currentRotateAngle % 360 / (360 / prize.length))
var turnIndex = 0
if (activeIndex > currentIndex) {
turnIndex = activeIndex - currentIndex
} else {
turnIndex = prize.length - (currentIndex - activeIndex)
}
var turnAngle = (turnNum + 1) * 360 - turnIndex * (360 / prize.length)
canvasDom.style.transform = "rotate(" + (turnAngle + window.currentRotateAngle) + "deg)";
window.currentRotateAngle = turnAngle + window.currentRotateAngle
// 显示抽奖结果
// setTimeout()
}
第二种方案：宫格抽奖
实现思路
1、依据当前展示的奖品总数计算宫格的列数，并确定每个方块的尺寸。
2、计算每个方块在网格中的x和y坐标，并应用相应的样式。
3、在用户点击抽奖时，轮流为对应的DOM元素添加选中状态的样式类。
实现效果
核心代码
初始化容器内容的逻辑：
function initContent() {
if (prize.length % 4 != 0) {
alert("奖品个数需为4的倍数")
return
}
let par_row_num = null;
let par_col_num = null;
for (let i = 0; i < prize.length; i++) {
var row_num = null;
var col_num = null;
var x = 0;
var y = 0;
if (par_row_num === null) {
row_num = 0;
col_num = 0;
} else if (par_row_num == 0 && par_col_num < (max_col_num - 1)) {
row_num = par_row_num;
col_num = par_col_num + 1;
} else if (par_col_num == (max_col_num - 1) && par_row_num < (max_col_num - 1)) {
row_num = par_row_num + 1;
col_num = par_col_num;
} else if (par_row_num == (max_col_num - 1) && par_col_num > 0) {
row_num = par_row_num;
col_num = par_col_num - 1;
} else if (par_col_num == 0 && par_row_num > 0) {
row_num = par_row_num - 1;
col_num = par_col_num;
}
x = col_num * (prizeBoxWidth + prizeBoxMargin * 2) + prizeBoxMargin
y = row_num * (prizeBoxWidth + prizeBoxMargin * 2) + prizeBoxMargin
// 给元素设置样式 或 通过html字符串拼接容器内容
// ......
par_row_num = row_num
par_col_num = col_num
}
}
抽奖方法的核心在于为元素动态添加选中样式，逻辑相对直观，此处不再赘述。
总结
至此，关于JavaScript实现两种常见抽奖效果（转盘与宫格）的文章介绍完毕。如需了解更多JS实现抽奖效果的内容，建议搜索本站历史文章或继续阅读后续相关教程。感谢大家的支持！