绘制抽奖转盘 （CSS+JS）

最新推荐文章于 2024-07-05 03:32:39 发布
最新推荐文章于 2024-07-05 03:32:39 发布
阅读量915 收藏 4
点赞数 3
分类专栏： 前端基础知识点 文章标签： css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47340917/article/details/120522930
版权

绘制抽奖转盘


Hello！这里是万物之恋，今天来教大家用css+js来简单绘制一个抽奖轮盘（不可转动）

HTML部分

	<div class="box">
		<h1>幸运大转盘</h1>
		<div class="giant-box">
			<div class="prize">
				<span class="prize-text">一等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">二等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">三等奖</span>
			</div>
			<div class="prize">
				<span class
最低0.47元/天 解锁文章
万物之恋
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS+CSS写的类似转盘的抽奖程序
王俊祥的菜鸟博客
12-12 3565
今天看到网上有好多抽奖程序，大部分都是flash的，想用还得付款，一怒之下下了这个精简版类似转盘的抽奖程序。 这是简单0-8个奖品页面，0-8即每个奖品，改的时候只需要自己把他们换成不同的样式就OK了。基本可以满足需求，如果有bug或漏洞，欢迎指正！
html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)
weixin_39650745的博客
12-01 2677
原文：https://www.cnblogs.com/wenruo/p/9732704.html先上效果基本是用CSS实现的，没有用图片，加一丢丢JS。不过没有考虑太多兼容性。首先画一个转盘<html lang="en"><head> <meta charset="UTF-8"> <title>幸运大转盘title> <s...
css3+javascript制作简单的转盘抽奖
10-31
css3+javascript制作简单的转盘抽奖 css3+javascript制作简单的转盘抽奖
HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️
java李阳勇的博客
09-06 1072
效果演示： 代码目录： 主要代码实现： 部分CSS样式： .winnerBox { max-width: 40rem; padding: 30px; margin: 30px auto; /*height: calc(100vh - 98px);*/ /*background-color: #fd6504 #9470fd;*/ background: linear-gradient(to bottom right, #...
前端入门篇（四十九）JS应用4转盘抽奖活动记录
最新发布
2401_84419493的博客
07-05 233
效果：4.在”开始“添加点击事件，当点击时才开始跑转盘在”开始“添加一个id，方便在JS中使用然后将计时器的开启放在”开始“的点击事件中效果：点击”开始“，转盘转动；不清除线程的情况下再次点击”开始“，会加速转盘转速5.跑三圈后在一个随机位置停下需要引入一个随机数，在点击事件里初始化，设定一个随机数，并开启计数器，当转盘转的步数到达这个随机数时，停止效果：6.前面转的慢，中间转得快速，最后面转得缓慢当步数到达指定值时，清除线程，重新开启一个新速度的线程//之前选中的取消。
html+css+js实现转盘抽奖
m0_72851228的博客
02-19 3607
html+css+js实现转盘抽奖
css实现（扇形图）抽奖转盘
m0_62762847的博客
06-13 868
css实现抽奖转盘和动画
css js jquey 实现大转盘抽奖
夏小沫学习之路
12-26 440
1.布局如图所示 2.实现思路 css布局分为 （1） 大转盘 （2）跑马灯 (3)内部转盘白色部分 (4) 奖品布局 （5） 抽奖按钮布局 js 部分： （1）初始化奖品 （2） 通过随机数获得获奖奖品 （3） 通过获奖的奖品计算转盘需要旋转的角度 （4）旋转停止提示中奖信息 ...
用CSS实现一个抽奖转盘(附详细代码+思路)
2301_77033813的博客
04-11 1256
animation-fill-mode 指定动画结束后停在什么位置，默认回到起始状态，forwards表示让动画停留在结束状态，backwards让动画回到第一帧的状态，both根据animation-direction轮流应用forwards和backwards规则。animation-play-state 动画执行状态，默认为running，可以设置为pause，动画将在当前状态停止，再改为running时，会接着上一次停止的位置继续执行动画。这是一个方块，先慢速闪三下，再快速闪三下，最后消失。
css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)
weixin_29042035的博客
01-10 394
点击上方“前端印象”，选择“设为星标”第一时间关注技术干货！效果基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。首先画一个转盘html><htmllang="en"><head><metacharset="UTF-8"><title>幸运大转盘title><style>/*重置默...
精美的js+vue仿京东大转盘抽奖插件
06-01
在本项目中，Vue.js被用来组织代码结构，创建可复用的组件，如抽奖转盘、按钮等。Vue的响应式数据系统使得数据更新能够实时反映到视图上，比如抽奖状态的变化。开发者可能通过Vue实例的`data`属性定义抽奖状态，`...
rotateAward:纯原生js手写转盘大抽奖游戏，使用css3+html5全新api
05-31
【rotateAward】是一款基于纯原生JavaScript开发的转盘大抽奖游戏，充分利用了CSS3和HTML5的新特性，为用户提供了一种生动、交互性强的抽奖体验。在这个项目中，我们将探讨其中涉及的关键技术和实现原理。 首先，让...
HTML5后台控制抽奖程序 转盘+刮刮乐
12-05
在这个抽奖程序中，HTML5的Canvas元素被用于绘制转盘和刮刮乐的视觉效果，通过JavaScript进行动态交互，实现旋转、刮开等动画效果。 转盘抽奖是一种常见的互动方式，用户点击按钮，转盘开始转动，最后停在某个区域...
css3抽奖转盘,从零制作CSS3抽奖大转盘
weixin_35793357的博客
08-04 889
今天的任务是做一个纯CSS3的还算比较漂亮的抽奖大转盘，也就是下图效果。我只说思路和重要的CSS3代码。Paste_Image.png外盘外盘是指有彩灯的深橙色圆环，以及圆环的外边线。外盘设一个div.lottery-box作为容器，border-radius为50%，边框厚度为20px，颜色就是深橙色。外边线的浅橙色，用box-shadow: 0px 0px 0 4px #febd04;来实现。...
Css如何优雅的实现抽奖转盘
白玉梁的专栏
04-26 3462
如图，抽奖转盘，可以拆分为几部分：1.底部大圆； 2.中间小圆； 3.扇形区； 4.扇形内部奖品区； 5.抽奖按钮； 6.点击抽奖按钮时旋转动效及逻辑；这其中，扇形区，以及扇形区内奖品的布局最为关键和麻烦，这个问题解决，剩下的问题，那都不是事儿！那如何用Css优雅的实现呢？——最关键的就是扇形区的绘制！这里用到css的两个关键属性：rotate skewY；旋转和倾斜；首先我们先来绘制一个扇形：步骤：1.先画一个圆形：css代码： 2.在圆形上，再画一个同大小的正方形，并将正方形左下角与圆心对齐，为了区分
[html]使用css绘制一个抽奖转盘
in twilight
01-17 4293
使用html、css3、js绘制一个抽奖转盘 1.画一个圆形container 设置溢出内容隐藏，并且使其内部元素靠上半部分居中 <div class="container"> </div> .container{ position: relative; width: 300px; height: 300px; border-radius: 50%; background: #f7c894; display: flex; .
步骤分解：教你五步实现css转盘抽奖小游戏
Don't lost way
07-03 2065
教你五步实现css转盘抽奖小游戏 先看一下整体效果。 分解思路： 第一步：先画一个园 这里是class="box"代码段 第二步：在圆上面再画一个圆圈，加点阴影效果，有那么点立体的感觉 这里是在上面的基础累加上class="turntable"代码段 第三步：画小圆灯 累加上class="little-circle"代码段，这里小圆灯等分用到了transform-origin属性，找准旋转的圆心即可。 第四步：画扇形奖品区 画扇形是一个比较头疼的问题，这里是用平行四边形代替，把多余的部分遮住，留
微信转盘抽奖前端源码(一)：8个奖品，指针开始时指向缝隙
nocomment_84的博客
03-08 1010
一 :  index.html&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;圆盘抽奖&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,in
html+css+js实现带有转盘的抽奖小程序
05-16
好的，下面是一个基于HTML、CSS、JS实现带有转盘的抽奖小程序的示例代码。 首先，我们需要在HTML中创建一个canvas元素，作为转盘的容器。 ```html <canvas id="canvas" width="400" height="400"></canvas> ``` 接下来，我们需要先在JS中定义一些转盘相关的变量和常量。 ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 转盘的中心点坐标 var x = canvas.width / 2; var y = canvas.height / 2; // 转盘半径 var r = x; // 转盘的扇形数量 var sectorCount = 6; // 每个扇形的角度 var sectorAngle = Math.PI * 2 / sectorCount; // 转盘的旋转角度 var rotateAngle = 0; // 奖品名称数组 var prizeTexts = ["奖品1", "奖品2", "奖品3", "奖品4", "奖品5", "奖品6"]; ``` 然后，我们可以编写一个函数来绘制转盘的扇形和文本。 ```javascript function drawSector(startAngle, endAngle, color, text) { // 绘制扇形 ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r, startAngle, endAngle); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); // 绘制文本 ctx.save(); ctx.translate(x, y); ctx.rotate(startAngle + (endAngle - startAngle) / 2); ctx.fillStyle = "#fff"; ctx.font = "bold 20px Arial"; ctx.fillText(text, r / 2, 0); ctx.restore(); } ``` 接下来，我们可以使用该函数来绘制转盘的扇形和文本。 ```javascript for (var i = 0; i < sectorCount; i++) { var startAngle = i * sectorAngle - rotateAngle; var endAngle = (i + 1) * sectorAngle - rotateAngle; var color = i % 2 == 0 ? "#f00" : "#0f0"; var text = prizeTexts[i]; drawSector(startAngle, endAngle, color, text); } ``` 现在，我们可以编写一个函数来旋转转盘。 ```javascript function rotate() { // 每次旋转增加的角度 var deltaAngle = Math.random() * 30 + 10; // 旋转角度增加 rotateAngle += deltaAngle; // 旋转到最近的扇形中心 var sectorIndex = Math.floor(rotateAngle / sectorAngle); rotateAngle = sectorIndex * sectorAngle; // 绘制转盘 ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < sectorCount; i++) { var startAngle = i * sectorAngle - rotateAngle; var endAngle = (i + 1) * sectorAngle - rotateAngle; var color = i % 2 == 0 ? "#f00" : "#0f0"; var text = prizeTexts[i]; drawSector(startAngle, endAngle, color, text); } } ``` 最后，我们可以在HTML中添加一个按钮，当用户点击该按钮时，调用rotate()函数来旋转转盘。 ```html <button onclick="rotate()">开始抽奖</button> ``` 完整的代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>抽奖小程序</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <button onclick="rotate()">开始抽奖</button> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 转盘的中心点坐标 var x = canvas.width / 2; var y = canvas.height / 2; // 转盘半径 var r = x; // 转盘的扇形数量 var sectorCount = 6; // 每个扇形的角度 var sectorAngle = Math.PI * 2 / sectorCount; // 转盘的旋转角度 var rotateAngle = 0; // 奖品名称数组 var prizeTexts = ["奖品1", "奖品2", "奖品3", "奖品4", "奖品5", "奖品6"]; function drawSector(startAngle, endAngle, color, text) { // 绘制扇形 ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r, startAngle, endAngle); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); // 绘制文本 ctx.save(); ctx.translate(x, y); ctx.rotate(startAngle + (endAngle - startAngle) / 2); ctx.fillStyle = "#fff"; ctx.font = "bold 20px Arial"; ctx.fillText(text, r / 2, 0); ctx.restore(); } function rotate() { // 每次旋转增加的角度 var deltaAngle = Math.random() * 30 + 10; // 旋转角度增加 rotateAngle += deltaAngle; // 旋转到最近的扇形中心 var sectorIndex = Math.floor(rotateAngle / sectorAngle); rotateAngle = sectorIndex * sectorAngle; // 绘制转盘 ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < sectorCount; i++) { var startAngle = i * sectorAngle - rotateAngle; var endAngle = (i + 1) * sectorAngle - rotateAngle; var color = i % 2 == 0 ? "#f00" : "#0f0"; var text = prizeTexts[i]; drawSector(startAngle, endAngle, color, text); } } </script> </body> </html> ``` 这样，我们就实现了一个简单的带有转盘的抽奖小程序。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值