The realization idea is entirely my own, so it may be different from other people's realization, and it cannot be guaranteed to be the best realization plan.
Don't spray if you don't like it
Type 1: Turntable lottery draw
Implementation ideas
1. Use canvas to draw a turntable, arc() to draw a fan, and drawImage() to draw a prize image
2. Use transform:rotate in CSS3 to achieve rotation
achieve effect
core code
The method of drawing the turntable:
(the specific value should be adjusted according to the size of the canvas, here my canvas size is 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();
})
}
Draw method:
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()
}
The second type: palace draw
Implementation ideas
1. Calculate the number of columns of the grid and the size of each square based on the number of current prizes displayed.
2. Calculate the xy of no square and set the style
. 3. Add the selected style in turn when clicking the lottery
achieve effect
core code
Initialize container content
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
}
}
There is nothing to explain about the lottery method, just add a selected style to the element