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，一经查实，立即删除！

相关文章

前端文件预览汇总

前端文件预览汇总

一、vue中预览word、excel、pdf&#xff1a; vue-office vue-office支持多种文件(docx、excel、pdf)预览的vue组件库&#xff0c;支持vue2/3&#xff0c;也支持非Vue框架的预览。 特点&#xff1a; 一站式&#xff1a;提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线…
阅读更多...
C# 键值对的使用

C# 键值对的使用

在C#中&#xff0c;键值对&#xff08;Key-Value Pair&#xff09;通常在字典&#xff08;Dictionary<TKey, TValue>&#xff09;数据结构中使用&#xff0c;它允许你根据一个唯一的键&#xff08;Key&#xff09;来存储和检索一个值&#xff08;Value&#xff09;。下面…
阅读更多...
MQ:RabbitMQ

MQ:RabbitMQ

同步和异步通讯 同步通讯: 需要实时响应,时效性强 耦合度高 每次增加功能都要修改两边的代码 性能下降 需要等待服务提供者的响应,如果调用链过长则每次响应时间需要等待所有调用完成 资源浪费 调用链中的每个服务在等待响应过程中,不能释放请求占用的资源,高并发场景下…
阅读更多...
在Java项目中集成单元测试与覆盖率工具

在Java项目中集成单元测试与覆盖率工具

在Java项目中集成单元测试与覆盖率工具 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 单元测试是软件开发中至关重要的一环&#xff0c;它用于验证代码在独立…
阅读更多...
排序——交换类排序、插入类排序、选择类排序、归并类排序

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

排序 排序算法分为交换类排序、插入类排序、选择类排序、归并类排序。 交换类排序 冒泡排序 冒泡排序的基本思想是&#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渲染管线介绍

Unity渲染管线介绍

Unity中的渲染管线渲染场景主要分为三个阶段 剔除&#xff08;Culling&#xff09; 剔除摄像机不可见对象&#xff08;视锥体剔除Frustum Culling&#xff09;和被遮挡对象&#xff08;遮挡剔除Occlusion Culling&#xff09;。 渲染&#xff08;Rendering&#xff09; 将可见…
阅读更多...
Unity 简单载具路线 Waypoint 导航

Unity 简单载具路线 Waypoint 导航

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

用Python轻松转换PDF为CSV

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

Three 颜色Color

构造器&#xff08;Constructor&#xff09; Color( r : Color_Hex_or_String, g : Float, b : Float ) r - (可选参数) 如果参数g和b被定义&#xff0c;则r表示颜色中的红色分量。 如果未被定义&#xff0c;r可以是一个十六进制 hexadecimal triplet 颜色值或CSS样式的字符串…
阅读更多...
【国产开源可视化引擎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 \…
阅读更多...
android Dialog沉浸式状态栏实现

android Dialog沉浸式状态栏实现

在Android中&#xff0c;创建沉浸式状态栏通常意味着让状态栏背景与应用的主题颜色一致&#xff0c;并且让对话框在状态栏下面显示&#xff0c;而不是浮动。为了实现这一点&#xff0c;你可以使用以下代码片段&#xff1a; 首先&#xff0c;在你的Activity中设置状态栏为隐藏或…
阅读更多...
SQL中字符串类型中char和varchar之间的区别是什么

SQL中字符串类型中char和varchar之间的区别是什么

在 MySQL 中&#xff0c;CHAR 和 VARCHAR 是两种常见的字符串数据类型&#xff0c;它们之间有以下主要区别&#xff1a; 存储方式 CHAR&#xff1a;固定长度存储。无论实际存储的字符数量多少&#xff0c;都会占用指定的固定字节数。VARCHAR&#xff1a;可变长度存储。只占用实…
阅读更多...
《昇思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.注意机器人各轴移动…
阅读更多...
最新文章

Copyright @ 2022~2023