快捷導(dǎo)航

JavaScript實現(xiàn)2種常見的抽獎效果實例代碼

更新時間：2024年01月04日 14:30:19 作者：mr_cmx

抽獎系統(tǒng)是一種常見的功能,可以用于各種活動和網(wǎng)站,這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)2種常見的抽獎效果的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

實現(xiàn)思路完全屬于自己想的，所以可能和其他人的實現(xiàn)不一樣，也不能保證是最佳的實現(xiàn)方案。

不喜勿噴

第一種：轉(zhuǎn)盤抽獎

實現(xiàn)思路

1、使用canvas繪制轉(zhuǎn)盤，arc()繪制扇形，drawImage()繪制獎品圖片

2、利用 CSS3中的 transform ：rotate 實現(xiàn)旋轉(zhuǎn)

實現(xiàn)效果

核心代碼

繪制轉(zhuǎn)盤方法：

（具體數(shù)值要根據(jù)畫布大小調(diào)整，這里我的畫布大小是401px）

// 繪制轉(zhuǎn)盤
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) {
	// 旋轉(zhuǎn)幾圈
    var turnNum = 4
	// 當(dāng)前選中下標(biāo)
    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
    // 顯示抽獎結(jié)果
    // setTimeout()
}

第二種：宮格抽獎

實現(xiàn)思路

1、通過當(dāng)前獎品顯示個數(shù)計算宮格多少列，每個方塊大小

2、計算沒方塊的xy并設(shè)置樣式

3、點擊抽獎時輪流添加選中樣式

實現(xiàn)效果

核心代碼

初始化容器內(nèi)容

function initContent() {
	if (prize.length % 4 != 0) {
        alert("獎品個數(shù)需為4的倍數(shù)")
        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
        // 給元素設(shè)置樣式 或 通過html字符串拼接容器內(nèi)容
        // ......
        
        par_row_num = row_num
        par_col_num = col_num
    }
}

抽獎方法就沒什么好解說的，給元素添加選中樣式而已