javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS Canvas大转盘抽奖功能

JavaScript实践之使用Canvas开发一个可配置的大转盘抽奖功能

作者：黑夜开发者

公司项目搞优惠活动,让做一个转盘抽奖的活动,这篇文章主要给大家介绍了关于JavaScript实践之使用Canvas开发一个可配置的大转盘抽奖功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

🚀一、引言

大转盘抽奖是一种常见的游戏方式，用户可以通过点击按钮让指针开始旋转，在经过一段时间后指针会停下来，显示用户中奖的奖项。本文将用Javascript和HTML实现一个简单的大转盘抽奖功能。详细介绍实现思路和代码。

⭐⭐文末附完整代码⭐⭐

🚀二、开发思路

本文将使用JavaScript和HTML来实现一个简单的大转盘抽奖功能。具体步骤如下：

🚀三、代码实现

🔎3.1 HTML结构（index.html）

<div id="canvas">
   <canvas id="wheel" width="600" height="600"></canvas></div>
<button onclick="startSpin()">抽奖</button>

🔎3.2 CSS样式（style.css）

css样式主要定义圆盘和按钮的显示效果，核心代码如下：

#canvas {
    position: relative;
}
.block {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

🔎3.3 JavaScript代码（script.css）

🍁3.3.1 配置中奖概率

先定义一个配置数组，用于配置奖项的名称抽奖背景色以及中奖的概率，后面圆盘会根据这个显示出对应的效果。

const prizes = [
   { text: '奖品1', color: '#f44336', probability: 0.2 },
   { text: '奖品2', color: '#9c27b0', probability: 0.1 },
   { text: '奖品3', color: '#3f51b5', probability: 0.15 },
   { text: '奖品4', color: '#00bcd4', probability: 0.25 },
   { text: '奖品5', color: '#4caf50', probability: 0.2 },
   { text: '奖品6', color: '#000000', probability: 0.1 }
];

🍁3.3.2 开发圆盘效果

根据上面的配置，来开发出圆盘，主要用到Javascript进行编码。

function drawWheel() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);

    let startAngle = 0;
    let endAngle = 0;

    for (let i = 0; i < prizes.length; i++) {
        startAngle = endAngle;
        endAngle = startAngle + (Math.PI * 2 * prizes[i].probability);

        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
        ctx.lineTo(centerX, centerY);
        ctx.fillStyle = prizes[i].color;
        ctx.fill();

        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate((startAngle + endAngle) / 2);
        ctx.fillStyle = 'white';
        ctx.font = '20px Arial';
        ctx.fillText(prizes[i].text, radius / 2, 0);
        ctx.restore();
    }
}

现在来预览一下圆盘效果，是不是还挺好看的。接下来继续开发指针及旋转中奖效果。

🍁3.3.3 开发指针样式

首先来一段css样式来安排一下指针效果：

#pointer {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 2.5px);
    width: 5px;
    height: 30%;
    background-color: red;
    transform-origin: bottom center;
    transition: transform 5s ease-in-out;
    left: 300px;
    top: 120px;
}

把下面的div放到index.html里面去，显示效果如下图。

<div id="pointer"></div>

🍁3.3.4 开发点击抽奖事件

我们通过点击按钮来触发抽奖动作。当用户点击按钮时。开始旋转抽奖指针，并且在5秒后停止并显示中奖内容。主要js代码如下。

function spinWheel() {
    if (!spinning) {
        angle = angle % (Math.PI * 2);

        ctx.clearRect(centerX - 10, centerY - radius - 10, 20, radius + 20);
        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate(angle);

        ctx.beginPath();
        ctx.moveTo(-5, -radius - 5);
        ctx.lineTo(5, -radius - 5);
        ctx.lineTo(0, -radius - 15);
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();

        ctx.restore();

        angle += 0.1;
        requestAnimationFrame(spinWheel);
    }
}
// 开始抽奖逻辑
function startSpin() {
    if (!spinning) {
        genRandom()
        spinning = true;
        spinWheel();
        pointerRotate()
        setTimeout(stopSpin, 5000);
    }
}
// 指针开始旋转
function pointerRotate() {
   const pointer = document.getElementById('pointer');
   const rotation = 360 * random + 720;
    // 设置动画
    pointer.style.transform = 'rotateZ(' + rotation + 'deg)';
    pointer.style.pointerEvents = 'none';
    // 停止旋转并弹出中奖内容
    setTimeout(() => {
        pointer.style.pointerEvents = 'auto';
    }, 5000);
}
// 指针停止事件
function stopSpin() {
    spinning = false;

    const selectedPrize = getSelectedPrize();
    alert('中奖内容：' + selectedPrize.text);
}
// 根据旋转角度获取中奖内容
function getSelectedPrize() {
    let startAngle = 0;
    let endAngle = prizes[0].probability;

    for (let i = 0; i < prizes.length; i++) {
        if (random >= startAngle && random < endAngle) {
            return prizes[i];
        }

        startAngle = endAngle;
        endAngle += prizes[i + 1].probability;
    }
}

🚀四、测试效果

在实际场景中假设我们设计如下5个奖项。点击抽奖按钮，可以看到指针转动，5秒后停止并弹出中奖内容。

  • macbook 14pro，中奖概率10%。
  • iPhone13，中奖概率30%。
  • xiaomi手机，中奖概率20%。
  • 100元商城优惠券，中奖概率20%。
  • 感谢参与，中奖概率20%。
const prizes = [
   { text: 'macbook14pro', color: '#f44336', probability: 0.1 },
   { text: 'iPhone13', color: '#9c27b0', probability: 0.3 },
   { text: 'xiaomi', color: '#3f51b5', probability: 0.2 },
   { text: '100元优惠券', color: '#00bcd4', probability: 0.2 },
   { text: '感谢参与', color: '#4caf50', probability: 0.2 },
];

🚀五、完整代码

🔎5.1 index.html

<!DOCTYPE html>
<html>
<head>
    <title>大转盘抽奖</title>
    <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
</head>
<body>
    <div id="canvas">
        <canvas id="wheel" width="600" height="600"></canvas>
        <div id="pointer"></div>
    </div>
    <button onclick="startSpin()">抽奖</button>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

🔎5.2 style.css

#canvas {
    position: relative;
    width: 600px;
    height: 600px;
}
#pointer {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 2.5px);
    width: 5px;
    height: 30%;
    background-color: red;
    transform-origin: bottom center;
    transition: transform 5s ease-in-out;
    left: 300px;
    top: 120px;
}

.block {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

🔎5.3 script.js

const prizes = [
    { text: 'macbook14pro', color: '#f44336', probability: 0.1 },
    { text: 'iPhone13', color: '#9c27b0', probability: 0.3 },
    { text: 'xiaomi', color: '#3f51b5', probability: 0.2 },
    { text: '100元优惠券', color: '#00bcd4', probability: 0.2 },
    { text: '感谢参与', color: '#4caf50', probability: 0.2 },
];

const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(canvas.width, canvas.height) / 2;
let angle = 0;
let spinning = false;

function drawWheel() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    let startAngle = 0;
    let endAngle = 0;

    for (let i = 0; i < prizes.length; i++) {
        startAngle = endAngle;
        endAngle = startAngle + (Math.PI * 2 * prizes[i].probability);

        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
        ctx.lineTo(centerX, centerY);
        ctx.fillStyle = prizes[i].color;
        ctx.fill();

        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate((startAngle + endAngle) / 2);
        ctx.fillStyle = 'white';
        ctx.font = '20px Arial';
        ctx.fillText(prizes[i].text, radius / 2, 0);
        ctx.restore();
    }
}

function spinWheel() {
    if (!spinning) {
        angle = angle % (Math.PI * 2);

        ctx.clearRect(centerX - 10, centerY - radius - 10, 20, radius + 20);
        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate(angle);

        ctx.beginPath();
        ctx.moveTo(-5, -radius - 5);
        ctx.lineTo(5, -radius - 5);
        ctx.lineTo(0, -radius - 15);
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();

        ctx.restore();

        angle += 0.1;
        requestAnimationFrame(spinWheel);
    }
}

function startSpin() {
    if (!spinning) {
        genRandom()
        spinning = true;
        spinWheel();
        pointerRotate()
        setTimeout(stopSpin, 5000);
    }
}

function pointerRotate() {

   const pointer = document.getElementById('pointer');
   const rotation = 360 * random + 720;
    // 设置动画
    pointer.style.transform = 'rotateZ(' + rotation + 'deg)';
    pointer.style.pointerEvents = 'none';
    // 停止旋转并弹出中奖内容
    setTimeout(() => {
        pointer.style.pointerEvents = 'auto';
    }, 5000);
}

function stopSpin() {
    spinning = false;

    const selectedPrize = getSelectedPrize();
    alert('中奖内容：' + selectedPrize.text);
}

function getSelectedPrize() {
    let startAngle = 0;
    let endAngle = prizes[0].probability;

    for (let i = 0; i < prizes.length; i++) {
        if (random >= startAngle && random < endAngle) {
            return prizes[i];
        }

        startAngle = endAngle;
        endAngle += prizes[i + 1].probability;
    }
}

var random = Math.random()

function genRandom() {
    random = Math.random()
}

drawWheel();

🚀六、总结

本文使用JavaScript和HTML实现了一个的大转盘抽奖功能。通过配置奖项和概率，用户可以根据自己的需要来设置抽奖的规则。点击抽奖按钮后，指针开始旋转，经过5秒后停止，并弹出中奖内容。

以上就是本文的具体思路和代码实现，通过这个示例，你可以了解到如何使用JavaScript和HTML来实现大转盘抽奖功能。希望对你有所帮助！实际的应用中，可以基于上面的内容修改。

到此这篇关于JavaScript使用Canvas开发一个可配置的大转盘抽奖功能的文章就介绍到这了,更多相关JS Canvas大转盘抽奖功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文