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

在这里插入图片描述

🏆作者简介，黑夜开发者，全栈领域新星创作者✌，阿里云社区专家博主，2023年6月csdn上海赛道top4。
🏆数年电商行业从业经验，历任核心研发工程师，项目技术负责人。
🏆本文已收录于专栏：100个JavaScript的小应用。
🎉欢迎 👍点赞✍评论⭐收藏

文章目录

  • 🚀一、引言
  • 🚀二、开发思路
  • 🚀三、代码实现
    • 🔎3.1 HTML结构（index.html）
    • 🔎3.2 CSS样式（style.css）
    • 🔎3.3 JavaScript代码（script.css）
      • 🍁3.3.1 配置中奖概率
      • 🍁3.3.2 开发圆盘效果
      • 🍁3.3.3 开发指针样式
      • 🍁3.3.4 开发点击抽奖事件
  • 🚀四、测试效果
  • 🚀五、完整代码
    • 🔎5.1 index.html
    • 🔎5.2 style.css
    • 🔎5.3 script.js
  • 🚀六、总结

🚀一、引言

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

⭐⭐文末附完整代码⭐⭐

🚀二、开发思路

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

  1. 创建HTML结构：使用HTML创建一个大转盘容器，包括转盘、指针和抽奖按钮。
  2. 使用CSS样式：使用CSS样式来美化大转盘的外观，包括颜色、字体等。
  3. 使用JavaScript编写抽奖逻辑：根据配置的奖项和概率，计算中奖结果，并设置指针的旋转动画效果。
  4. 绑定点击事件：为抽奖按钮绑定点击事件，点击按钮后开始抽奖逻辑。
  5. 弹出中奖内容：抽奖结束后，使用alert弹窗显示中奖结果。

🚀三、代码实现

🔎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秒后停止并弹出中奖内容。

  1. macbook 14pro，中奖概率10%。
  2. iPhone13，中奖概率30%。
  3. xiaomi手机，中奖概率20%。
  4. 100元商城优惠券，中奖概率20%。
  5. 感谢参与，中奖概率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">
</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来实现大转盘抽奖功能。希望对你有所帮助！实际的应用中，可以基于上面的内容修改。

在这里插入图片描述

今天的内容就到这里，我们下次见。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/61854.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【瑞吉外卖项目复写】基本部分复写笔记

【瑞吉外卖项目复写】基本部分复写笔记

Day1 瑞吉外卖项目概述 mysql的数据源配置 spring:datasource:druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/regie?serverTimezoneAsia/Shanghai&useUnicodetrue&characterEncodingutf-8&zeroDateTimeBehaviorconvertTo…
阅读更多...
【C++】深入浅出STL之vector类

【C++】深入浅出STL之vector类

文章篇幅较长&#xff0c;越3万余字&#xff0c;建议电脑端访问 文章目录 一、前言二、vector的介绍及使用1、vector的介绍2、常用接口细述1&#xff09;vector类对象的默认成员函数① 构造函数② 拷贝构造③ 赋值重载 2&#xff09;vector类对象的访问及遍历操作① operator[]…
阅读更多...
windows永久暂停更新

windows永久暂停更新

目录 1.winr,输入regedit打开注册表 2.打开注册表的这个路径: 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings 右键空白地方新建QWORD值命名为:FlightSettingsMaxPauseDays 3.双击FlightSettingsMaxPauseDays,修改里面的值为100000,右边基数设置…
阅读更多...
区块链实验室(14) - 编译FISCO-BCOS

区块链实验室(14) - 编译FISCO-BCOS

FISCO-BCOS是一种区块链平台&#xff0c;与Hyperledger和Ethereum有些不同&#xff0c;详见FISCO BCOS 区块链 编译FISCO BCOS源码的目的是修改或者新增其中功能模块&#xff0c;进行对比实验&#xff0c;验证新想法、新创意的效果。编译的步骤很简单&#xff0c;按技术文档一…
阅读更多...
JavaWeb三大组件 —— Servlet

JavaWeb三大组件 —— Servlet

目录 servlet 注册servlet 父pom pom文件 1、通过注解注册 2、使用ServletRegistrationBean注册 API三生三世 第一生Servlet 第二生SpringMVC 今生SpringBoot servlet Servlet的作用&#xff1a; 接受请求参数、处理请求&#xff0c;响应结果&#xff0c;&#xff08;就…
阅读更多...
flask中的应用上下文

flask中的应用上下文

flask中的应用上下文 Flask应用上下文主要包含两个对象&#xff1a;current_app和g。这两个对象在处理请求期间都是全局可访问的&#xff0c;但在每个请求结束时都会被重置。 current_app&#xff1a;这是当前激活的Flask应用的实例。在大多数情况下&#xff0c;你可以将其视为…
阅读更多...
回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循…
阅读更多...
go-zero超强工具goctl的常用命令api，rpc，model及其构建的服务解析

go-zero超强工具goctl的常用命令api，rpc，model及其构建的服务解析

goctl api 详情移步&#xff1a; go-zero的路由机制解析 基于go-zero的api服务刨析并对比与gin的区别 goctl rpc goctl支持多种rpc&#xff0c;较为流行的是google开源的grpc&#xff0c;这里主要介绍goctl rpc protoc的代码生成与使用。 protoc是grpc的命令&#xff0c;作用…
阅读更多...
uniapp uview文件上传的文件不是文件流，该如何处理？用了uni.chooseImage预览功能要如何做

uniapp uview文件上传的文件不是文件流，该如何处理？用了uni.chooseImage预览功能要如何做

在使用uniapp开发&#xff0c;运用的ui是用uview&#xff0c;这边需要做一个身份认证&#xff0c;如下图 使用的是uview的u-upload组件&#xff0c;可是这个组件传给后端的不是文件流 后端接口需要的是文件流格式&#xff0c;后面使用了uniapp的选择图片或者拍照的api&#x…
阅读更多...
UltraToolBars Crack,动画菜单和多种显示样式

UltraToolBars Crack,动画菜单和多种显示样式

UltraToolBars Crack,动画菜单和多种显示样式 创建模仿Microsoft Office 2000外观的健壮应用程序。 UltraToolBars包括11个用于创建可自定义工具栏的界面增强控件&#xff0c;包括&#xff1a;个性化菜单、弹出型工具栏、集成选项卡控件等。PictureRegion技术使表单和组件能够采…
阅读更多...
实现vscode上用gdb调试stm32

实现vscode上用gdb调试stm32

实现vscode上用gdb调试stm32 这周负责编写设备的某个模块&#xff0c;其中遇到了一些变量地址不正确的错误&#xff0c;按理这种底层变量错误用gdb一类的调试器就能很快查到&#xff0c;可是初入嵌入式一行&#xff0c;此C语言非彼C语言&#xff0c;对于gdb怎么对接到项目上根…
阅读更多...
微服务系列＜3＞---微服务的调用组件 rpc 远程调用

微服务系列＜3＞---微服务的调用组件 rpc 远程调用

什么是rpc调用,让我们调用远程方法就像调用本地方法一样 这就属于rpc调用 rpc是针对于本地来说的 调用远程方法根调用本地方法一样 如果能达到这种效果 就是rpc调用如果达到一种效果 调用远程和调用本地一样 他就是一种rpc框架2个微服务 之间发的调用 我们之前通过ribbon的方式…
阅读更多...
【数模】预测模型

【数模】预测模型

一、灰色系统 白色系统&#xff1a;系统信息完全明确灰色系统&#xff1a;系统部分信息已知&#xff0c;部分信息未知 对在一定范围内变化的、与时间有关的灰色过程进行预测。过程&#xff1a;原始数据找规律→生成强规律性的数据序列→建立微分方程来预测未来趋势 黑色系统&a…
阅读更多...
JavaWeb项目工程结构介绍

JavaWeb项目工程结构介绍

介绍idea创建Web项目工程下的项目结构&#xff08;新建的web工程&#xff09; 了解目录大致作用 一级目录 :.idea、out、src、web、工程名.iml .idea目录&#xff1a;记录了IntelliJ IDEA 的配置目录&#xff0c;包含项目的配置信息、工程设置、构建配置等。它是用来存储项目…
阅读更多...
谈谈网络安全

谈谈网络安全

目录 1.概念 2.发展现状 3.主要问题 1.概念 网络安全是指保护计算机网络和其中的数据免受未经授权访问、损坏、窃取或破坏的过程和技术。网络安全涉及预防和检测潜在的威胁和漏洞&#xff0c;并采取措施保护网络的机密性、完整性和可用性。 网络安全的概念包括以下几个方面&am…
阅读更多...
Vue系列第七篇：Element UI之el-main，el-table，el-dialog，el-pagination，el-breadcrumb等控件使用

Vue系列第七篇：Element UI之el-main，el-table，el-dialog，el-pagination，el-breadcrumb等控件使用

本篇实现主页面功能&#xff0c;包括主页面排版布局&#xff0c;学生管理模块实现&#xff0c;后台接口实现等功能。 目录 1.运行效果 1.1登录页面 1.2主页面 1.3学生管理 - 信息列表 1.4学生管理 - 信息管理 1.5学生管理 - 作业列表 1.6学生管理 - 作业管理 2.前端代码…
阅读更多...
开源元数据管理平台Datahub最新版本0.10.5——安装部署手册（附离线安装包）

开源元数据管理平台Datahub最新版本0.10.5——安装部署手册（附离线安装包）

大家好&#xff0c;我是独孤风。 开源元数据管理平台Datahub近期得到了飞速的发展。已经更新到了0.10.5的版本&#xff0c;来咨询我的小伙伴也越来越多&#xff0c;特别是安装过程有很多问题。本文经过和群里大伙伴的共同讨论&#xff0c;总结出安装部署Datahub最新版本的部署手…
阅读更多...
Flowise AI：用于构建LLM流的拖放UI

Flowise AI：用于构建LLM流的拖放UI

推荐&#xff1a;使用NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 什么是Flowise AI&#xff1f; Flowise AI是一个开源的UI可视化工具&#xff0c;用于帮助开发LangChain应用程序。在我们详细介绍 Flowise AI 之前&#xff0c;让我们快速定义 LangChain。LangChain是…
阅读更多...
pytorch实战-图像分类（二）（模型训练及验证）（基于迁移学习（理解+代码））

pytorch实战-图像分类（二）（模型训练及验证）（基于迁移学习（理解+代码））

目录 1.迁移学习概念 2.数据预处理 3.训练模型&#xff08;基于迁移学习&#xff09; 3.1选择网络&#xff0c;这里用resnet 3.2如果用GPU训练&#xff0c;需要加入以下代码 3.3卷积层冻结模块 3.4加载resnet152模 3.5解释initialize_model函数 3.6迁移学习网络搭建 3.…
阅读更多...
迭代器模式(Iterator)

迭代器模式(Iterator)

迭代器模式是一种行为设计模式&#xff0c;可以在不暴露底层实现(列表、栈或树等)的情况下&#xff0c;遍历一个聚合对象中所有的元素。 Iterator is a behavior design pattern that can traverse all elements of an aggregate object without exposing the internal imple…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站