H5 Canvas实现转盘效果，控制指定数字

效果图

实现思路：

用Canvas画圆，然后再画扇形，然后中奖的开始用一张图片代替，点击的时候触发转动效果。

实现代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>活动中心</title><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /><meta name="format-detection" content="telephone=no,email=no,date=no,address=no"><style type="text/css">* {margin: 0px;padding: 0px;border: none;width: 100%;}body {background-color: #F6FBF7;}</style>
</head>
<body><div style="border: solid 1px #ECECEC;font-weight:bold;background-color:white;line-height:50px;text-align:center;margin:0px auto;width:80%;margin-top:20px;">幸运转盘</div><div id="number" style="line-height: 50px; font-weight: bold; text-align: center; margin: 0px auto; width: 80%; margin-top: 50px;">????</div><div style="width: calc(100wh); margin: 0px auto 0 auto; text-align: center;"><img onClick="spin();" src="~/Content/H5Game/click.jpg" style="width: 100px; height: 100px; margin: 0px auto; display: block; position: absolute; left: calc(50% - 50px); top: 315px " /><canvas id="wheelcanvas" width="500" height="500"></canvas></div><script type="text/javascript">//颜色var colors = ["#ED6E40", "#D7363C", "#D5386B", "#B731C4", "#7936D4", "#215ACD", "#4192BE", "#82AD49"];var restaraunts = [];var number = 48;//数字，需要12的倍数for (var i = 1; i <= number; i++) {restaraunts.push(i);}var startAngle = 0;var arc = Math.PI / (number / 2);var spinTimeout = null;var spinArcStart = 10;var spinTime = 0;var spinTimeTotal = 0;// 你指定的数字var targetNumber = 37;//1=37 2=36 .....37=1, 38=48 39=47.....48=38//不出现的数据var hideNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];//数字的对应关系var targetKeyValue = {};var ctx;//初始化数字和对应关系，如果你要得到1，那么数字就是targetKeyValue.1得到的37for (var i = 1; i <= 37; i++) {targetKeyValue[i] = 38 - i;}for (var i = 1; i <= 11; i++) {targetKeyValue[37 + i] = 49 - i;}//获取随机数function randomNumber() {var randomNumber = getRandomInt(1, 48);//判断如果在不出现的数字内，继续生成一个其他的while (hideNumber.includes(randomNumber)) {randomNumber = getRandomInt(1, 48);}return targetKeyValue[randomNumber];}function getRandomInt(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}function draw() {drawRouletteWheel();}function drawRouletteWheel() {var canvas = document.getElementById("wheelcanvas");if (canvas.getContext) {var outsideRadius = 200;//外圈大小var textRadius = 170;//数字显示的位置var insideRadius = 40;//内圈大小ctx = canvas.getContext("2d");ctx.clearRect(0, 0, 500, 500);ctx.strokeStyle = "white";//两个圈圈的边框颜色ctx.lineWidth = 6;//外面圈圈的边框，会影响到显示ctx.font = ' 14px Microsoft YaHei';//转盘数字，字体，微软雅黑var colorIndex = 0;for (var i = 0; i < number; i++) {var angle = startAngle + i * arc;ctx.fillStyle = colors[colorIndex];colorIndex++;if (colorIndex == colors.length - 1) {colorIndex = 0;}ctx.beginPath();ctx.arc(250, 250, 0, 0, 0, true);//扇形区域的间隔ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);ctx.arc(250, 250, insideRadius, angle + arc, angle, true);ctx.stroke();ctx.fill();ctx.save();ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0;ctx.shadowBlur = 0;ctx.shadowColor = "";//"rgb(220,220,220)";//字体的阴影ctx.fillStyle = "#FFFFFF"; //字体颜色//-2调整字体的位置ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);ctx.rotate(angle + arc / 2 + Math.PI / 2);var text = restaraunts[i];ctx.fillText(text, -ctx.measureText(text).width / 2, 0);ctx.restore();}箭头//ctx.fillStyle = "black";//ctx.beginPath();//ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));//ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));//ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));//ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));//ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));//ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));//ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));//ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));//ctx.fill();}}function spin() {init();//点击的时候，指定一个数据targetNumber = randomNumber();document.getElementById("number").innerText = "????";// 计算总旋转角度//var targetNumber = 1; // 你指定的数字var targetIndex = restaraunts.indexOf(targetNumber);var targetAngle = targetIndex * arc;var totalRotations = 10; // 10圈var totalAngle = totalRotations * 2 * Math.PI + targetAngle;spinTime = 0;spinTimeTotal = 6000; // 旋转时间rotateWheel(totalAngle);}function rotateWheel(totalAngle) {spinTime += 30;var degrees = startAngle * 180 / Math.PI + 90;var arcd = arc * 180 / Math.PI;var index = Math.floor((360 - degrees % 360) / arcd);var finalNumber = restaraunts[index];console.log(finalNumber);startAngle += (totalAngle - startAngle) * 0.05; // 平滑旋转drawRouletteWheel();if (spinTime < spinTimeTotal) {spinTimeout = setTimeout(function () {rotateWheel(totalAngle);}, 30);} else {document.getElementById("number").innerText = finalNumber;}}function init() {// 确保默认停在数字1var targetIndex = restaraunts.indexOf(37);var targetAngle = targetIndex * arc;startAngle = targetAngle;draw();}init();</script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MQ:RabbitMQ

MQ:RabbitMQ

同步和异步通讯 同步通讯: 需要实时响应,时效性强 耦合度高 每次增加功能都要修改两边的代码 性能下降 需要等待服务提供者的响应,如果调用链过长则每次响应时间需要等待所有调用完成 资源浪费 调用链中的每个服务在等待响应过程中,不能释放请求占用的资源,高并发场景下…
阅读更多...
排序——交换类排序、插入类排序、选择类排序、归并类排序

排序——交换类排序、插入类排序、选择类排序、归并类排序

排序 排序算法分为交换类排序、插入类排序、选择类排序、归并类排序。 交换类排序 冒泡排序 冒泡排序的基本思想是&#xff1a;从后往前&#xff08;或从前往后&#xff09;两两比较相邻元素的值。若A[ j - 1 ] > A[ j ]&#xff0c;则交换它们&#xff0c;直到序列比较…
阅读更多...
commonjs、module 模块同时启动

commonjs、module 模块同时启动

怎样同时在一个项目中同时启动node服务和我们前端项目&#xff08;commonjs、module 模块同时启动&#xff09; 今天在使用node实现完增删改查的接口之后&#xff0c;将自己node代码嵌入到我们react项目中 启动完前端项目之后&#xff0c;当我使用node service.js的时候&#x…
阅读更多...
Unity 简单载具路线 Waypoint 导航

Unity 简单载具路线 Waypoint 导航

前言 在游戏开发和导航系统中&#xff0c;"waypoint" 是指路径中的一个特定位置或点。它通常用于定义一个物体或角色在场景中移动的目标位置或路径的一部分。通过一系列的 waypoints&#xff0c;可以指定复杂的移动路径和行为。以下是一些 waypoint 的具体用途&…
阅读更多...
用Python轻松转换PDF为CSV

用Python轻松转换PDF为CSV

数据的可访问性和可操作性是数据管理的核心要素。PDF格式因其跨平台兼容性和版面固定性&#xff0c;在文档分享和打印方面表现出色&#xff0c;尤其适用于报表、调查结果等数据的存储。然而&#xff0c;PDF的非结构化特性限制了其在数据分析领域的应用。相比之下&#xff0c;CS…
阅读更多...
【国产开源可视化引擎Meta2d.js】图元

【国产开源可视化引擎Meta2d.js】图元

图元 又称画笔Pen。图形表达的基本元素&#xff0c;组成图像的基本单元。 构成 每一个图元由ID、名字、类型、属性&#xff08;数据&#xff09;组成。 ID 名为“id”的特殊属性&#xff0c;图元实例&#xff08;画布上的图元对象&#xff09;的唯一标识。拖拽到画布或创建…
阅读更多...
【线性代数的本质】矩阵与线性变换

【线性代数的本质】矩阵与线性变换

线性变化要满足两点性质&#xff1a; 直线&#xff08;连续的点&#xff09;在变换后还是直线。原点不变。 假设有坐标轴&#xff08;基底&#xff09; i ^ \widehat{i} i 和 j ^ \widehat{j} j ​&#xff1a; i ^ [ 1 0 ] , j ^ [ 0 1 ] \widehat{i}\begin{bmatrix} 1 \…
阅读更多...
《昇思25天学习打卡营第6天|网络构建》

《昇思25天学习打卡营第6天|网络构建》

文章目录 前言&#xff1a;今日所学&#xff1a;1. 定义模型类2. 模型层3. 模型参数 前言&#xff1a; 在第六节中我们学习了网络构建&#xff0c;了解了神经网络模型是由神经网络层和Tensor操作构成&#xff0c;我们使用的mindspore.nn中提供了常见的升级网络层的实现&#x…
阅读更多...
在线图片转文字的软件，分享3种强大的软件！

在线图片转文字的软件，分享3种强大的软件！

在信息爆炸的时代&#xff0c;图片作为信息的重要载体之一&#xff0c;其内容往往蕴含着巨大的价值。然而&#xff0c;面对海量的图片信息&#xff0c;如何高效、准确地将其转化为文字&#xff0c;成为了许多人的迫切需求。今天&#xff0c;就为大家盘点几款功能强大的在线图片…
阅读更多...
【python基础】—如何理解安装程序时要配置Widows和DOS操作系统中的path环境变量？

【python基础】—如何理解安装程序时要配置Widows和DOS操作系统中的path环境变量？

文章目录 前言一、环境变量是什么&#xff1f;二、为什么需要设置环境变量&#xff1f;三、配置anaconda的环境变量 前言 在安装一些程序的时候&#xff0c; 我们总是需要将安装路径配置到正在使用电脑的环境变量里。为什么要进行这一步呢&#xff1f;本文主要解释Widows和DOS…
阅读更多...
特殊用途二极管+二极管故障检测+三极管（BJT）的工作原理+定时器的使用（小灯定时闪烁实现）

特殊用途二极管+二极管故障检测+三极管（BJT）的工作原理+定时器的使用（小灯定时闪烁实现）

2024-7-5&#xff0c;星期五&#xff0c;17:27&#xff0c;天气&#xff1a;晴&#xff0c;心情&#xff1a;晴。今天没有什么特殊的事情发生&#xff0c;继续学习啦&#xff0c;加油加油&#xff01;&#xff01;&#xff01; 今日完成模电自选教材第二章内容的学习&#xff…
阅读更多...
1-4 NLP发展历史与我的工作感悟

1-4 NLP发展历史与我的工作感悟

1-4 NLP发展历史与我的工作感悟 主目录点这里 第一个重要节点&#xff1a;word2vec词嵌入 能够将无限的词句表示为有限的词向量空间&#xff0c;而且运算比较快&#xff0c;使得文本与文本间的运算有了可能。 第二个重要节点&#xff1a;Transformer和bert 为预训练语言模型发…
阅读更多...
【ABB】原点设定

【ABB】原点设定

【ABB】原点设定 操作流程演示 操作流程 操作轴回原点编辑电机校准偏移更新转速计数器 1.首先得了解机器手的轴&#xff0c;这里以6轴作参考。 注意先回456轴&#xff0c;后回123轴。 2.然后需要了解机器人关节运动模式&#xff0c;即选择如下两个模式。 3.注意机器人各轴移动…
阅读更多...
QT的编译过程（底层逻辑）

QT的编译过程（底层逻辑）

qmake -project 用于从源代码生成项目文件&#xff0c;qmake 用于从项目文件生成 Makefile&#xff0c;而 make 用于根据 Makefile 构建项目。 详细解释&#xff1a; qmake -project 这个命令用于从源代码目录生成一个初始的 Qt 项目文件&#xff08;.pro 文件&#xff09;。它…
阅读更多...
吃顿饭的时间，用AI开发一个应用官网

吃顿饭的时间，用AI开发一个应用官网

最早接触开发时做的第一个项目就是企业官网&#xff0c;到后来自己开始走上独立开发者的道路时&#xff0c;哪怕是开发面向消费者的移动端产品&#xff0c;在产品上架时也需要提供应用官网。 感觉&#xff0c;编程这件事情和官网开发&#xff0c;紧密相连。 过往为了追求开发效…
阅读更多...
个人微信 微信营销系统

个人微信 微信营销系统

个人微信 微信营销系统 CRM系统
阅读更多...
Windows 玩转大模型第一天：大模型本地部署，调用大模型API可直接工程化应用（全部代码和详细部署流程）

Windows 玩转大模型第一天：大模型本地部署，调用大模型API可直接工程化应用（全部代码和详细部署流程）

Ollama 是一个开源框架&#xff0c;专为在本地机器上便捷部署和运行大型语言模型&#xff08;LLM&#xff09;而设计。 以下是其主要特点和功能概述&#xff1a; 1. 简化部署&#xff1a;Ollama 目标在于简化在 Docker 容器中部署大型语言模型的过程&#xff0c;使得非专业用…
阅读更多...
ELK日志系统和Filebeat采集器的学习总结

ELK日志系统和Filebeat采集器的学习总结

ELK是ElasticSerach、Logstash、Kina Logstash负责采集数据&#xff0c;Logstash有三个插件&#xff0c;input、filter、output&#xff0c;filter插件作用是对采集的数据进行处理&#xff0c;过滤的&#xff0c;因此filter插件可以选&#xff0c;可以不用配置。 ElasticSear…
阅读更多...
vulnhub靶场之DC-1

vulnhub靶场之DC-1

1 信息收集 1.1 主机发现 arp-scan -l 主机ip地址为&#xff1a;192.168.1.4 1.2 端口服务扫描 nmap -sS -sV -A -T5 -p- 192.168.1.4 开发22&#xff0c;80&#xff0c;111端口 1.3 目录扫描 dirsearch -u 192.168.1.4 2 渗透测试 2.1 先访问一下80端口 发现是一个…
阅读更多...
K8S 部署 EFK

K8S 部署 EFK

安装说明 系统版本为 Centos7.9 内核版本为 6.3.5-1.el7 K8S版本为 v1.26.14 ES官网 开始安装 本次安装使用官方ECK方式部署 EFK&#xff0c;部署的是当前的最新版本。 在 Kubernetes 集群中部署 ECK 安装自定义资源 如果能打开这个网址的话直接用这个命令安装,打不开的话…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023