html5 制作幸运大转盘
2024-06-03 10:43:35
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>购买大厅</title>
<%@include file="../../include/include.jsp"%>
<%@include file="../../include/main.jsp"%>
<body style="background-color: #514f4f;overflow: hidden;">
<div class="nav" style="height:43px;line-height:43px;background-color: #CC0000;display:block;"><p>幸运大转盘</p><span class="bank"><a href="javascript:window.history.go(-1);" class="hand">返回</a></span>
</div>
<div style="width: 100%;padding-top:50px;"><p style="margin:0px auto;line-height:20px;padding:5px 5px;width:95%;color: #747373;font-size:14px;background-color: #dedede;">游戏规则：每次转动消费10积分,中奖后系统记录,客服会与您第一时间取得联系！</p>
</div>
<div style="padding:5px 0px 0px 15px;"><p><span style="font-size:16px;color:#fff;position: relative;top:10px;">当前积分1000</span> <input id="spinBtn" type="button" οnclick="spin();" value="开始抽奖" class="luckBtn" style="margin-top: 3px;"></p>
</div>
<div style="width: 100%;text-align: center;margin:0px auto;">
<canvas id="wheelcanvas" width="500" height="500"></canvas>
</div>
<script type="application/javascript">
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB","#2E2C75", "#673A7E", "#CC0071", "#F80120","#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];var restaraunts = ["X2", "X4", "X5", "继续努力","双色球一注","5000元现金","iphone6一台","苹果笔记本一台"];var startAngle = 0;var arc = Math.PI / 4;var spinTimeout = null;var spinArcStart = 10;var spinTime = 0;var spinTimeTotal = 0;var winWidth=500;var ctx;function draw() {drawRouletteWheel();}var windowWidth=0;if((document.body) && (document.body.clientWinWidth)){windowWidth = document.body.clientWinWidth;}else if(window.innerWidth){windowWidth = window.innerWidth;}if(windowWidth!=0&&windowWidth<400){$("#wheelcanvas").width(320);$("#wheelcanvas").height(320);}function drawRouletteWheel() {var canvas = document.getElementById("wheelcanvas");if (canvas.getContext) {var outsideRadius = winWidth*0.4;var textRadius = winWidth*160/500;var insideRadius = winWidth*125/500;ctx = canvas.getContext("2d");ctx.clearRect(0,0,winWidth,winWidth);// var pic = new Image();
// pic.width=500;
// pic.οnlοad=function(){
// ctx.drawImage(pic,0,0,500,500);
// }
<%-- pic.src ="<%=basePath%>/resources/images/touch/pan.gif"; --%>ctx.strokeStyle = "#CFCFCF";ctx.lineWidth = 2;ctx.font = 'bold 16px sans-serif';ctx.fillStyle = "#fff";ctx.arc(winWidth/2, winWidth/2, outsideRadius+15,0,2*Math.PI,true);ctx.stroke();ctx.fill();ctx.save();for(var i = 0; i < 8; i++) {var angle = startAngle + i * arc;ctx.fillStyle = colors[i];ctx.beginPath();ctx.arc(winWidth/2, winWidth/2, outsideRadius, angle, angle + arc, false);ctx.arc(winWidth/2, winWidth/2, 10, angle + arc, angle, true);ctx.stroke();ctx.fill();ctx.save();
/* ctx.shadowOffsetX = -1;ctx.shadowOffsetY = -1;ctx.shadowBlur = 0;ctx.shadowColor = "rgb(220,220,220)";*/ctx.fillStyle = "#FFF";ctx.translate(winWidth/2 + Math.cos(angle + arc / 2) * textRadius, winWidth/2 + 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(); }//Arrowctx.fillStyle = "white";ctx.beginPath();ctx.moveTo(winWidth/2 - 4, winWidth/2 - (outsideRadius + 5));ctx.lineTo(winWidth/2 + 4, winWidth/2 - (outsideRadius + 5));ctx.lineTo(winWidth/2 + 4, winWidth/2 - (outsideRadius - 5));ctx.lineTo(winWidth/2 + 9, winWidth/2 - (outsideRadius - 5));ctx.lineTo(winWidth/2 + 0, winWidth/2 - (outsideRadius - 23));ctx.lineTo(winWidth/2 - 9, winWidth/2 - (outsideRadius - 5));ctx.lineTo(winWidth/2 - 4, winWidth/2 - (outsideRadius - 5));ctx.lineTo(winWidth/2 - 4, winWidth/2 - (outsideRadius + 5));ctx.fill(); }}function spin() {$("#spinBtn").attr("disabled","true");$("#spinBtn").css("background","grey");spinAngleStart = Math.random() * 10 + 30;spinTime = 0;spinTimeTotal = Math.random() * 4 + 5 * 1000;rotateWheel();}function rotateWheel() {spinTime += 20;if(spinTime >= spinTimeTotal) {stopRotateWheel();return;}var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);startAngle += (spinAngle * Math.PI / 180);drawRouletteWheel();spinTimeout = setTimeout('rotateWheel()', 20);}function stopRotateWheel() {clearTimeout(spinTimeout);var degrees = startAngle * 180 / Math.PI + 90;var arcd = arc * 180 / Math.PI;var index = Math.floor((360 - degrees % 360) / arcd);ctx.save();ctx.font = 'bold 30px sans-serif';var text = restaraunts[index]ctx.fillText(text, winWidth/2 - ctx.measureText(text).width / 2, winWidth/2 + 10);ctx.restore();$("#spinBtn").removeAttr("disabled");$("#spinBtn").css("background","#CC0000");}function easeOut(t, b, c, d) {var ts = (t/=d)*t;var tc = ts*t;return b+c*(tc + -3*ts + 3*t);}draw();
</script>
<body>
</html>效果如下：
自己在网上找到一些例子，自己改了改，用html5的canvas实现的；
也有几种思路，就是用css的border 和圆角来做的，然后用css的rotate等函数来做
还有就是jquery插件控制图片来做的
还有就是用css来控制图片来做的。
有兴趣可以研究。
html5 制作幸运大转盘相关推荐
- html幸运大转盘,HTML5+Fontawesome 幸运大转盘
CSS 语言: CSSSCSS 确定 * { margin: 0; padding: 0; } body { background: #eaeaea; color: #fff; font-size: ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
- html5绘制图形幸运大转盘,幸运大转盘 - 慧编程 - 专注于青少年 STEAM 教育的图形化编程平台...
案例详情 1.实现效果 按下板载按钮后,开始一次抽奖,大转盘的指针不断旋转,然后随机停留在一个位置上,指针指向的盘面就能获得相对应的奖品. 2.实现思路 为了实现每次指针的指向无法预测,需要使用随机数 ...
- cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...
- PHP做大转盘抽奖的思路,jQuery实现幸运大转盘(php抽奖程序)抽奖程序
抽奖程序有各式各样的形式,其中幸运大转盘最为常见.线上线下都有很多的使用场景. 本文结合我自己的php网站,是实现一个php抽奖程序. 下图是该抽奖程序的截图: 一般的抽奖程序主要是算法程序,界面效果 ...
- QT 幸运大转盘动画
想要更多项目私wo!!! 一.项目简介 幸运大转盘的制作其实很简单,幸运大转盘的整体思想是这样: 1.定时器用来刷新大转盘的界面这样就有动态的旋转效果, 2.监听键盘 ...
- Jquery写的幸运大转盘抽奖实例,用asp.net处理的服务器逻辑，附源码下载
[实例简介] 该幸运大转盘抽奖实例已实现服务器端的业务逻辑代码,稍加改动就可以应用实际了 文件:590m.com/f/25127180-488779229-66bbf7(访问密码:551685) [实 ...
- PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖 PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 1 $prizes = array( 2 0 => array( 3 &q ...
最新文章
- request.getSession(false)到底返回什么
- 设计模式之AbstractFactory
- php表单时间转换为时间戳-175
- jsp可以使用iframe_使用 JavaScript object URLs，可以处理图像、音频和视频
- 飞康CEO：敢于向传统的灾备法则说“不”
- 创业 4 年获近 7000 万美元融资，53 岁老程序员 all in 开源
- LIB和DLL的区别与使用
- gradle打包web jar_Gradle构建SpringBoot并打包可运行的jar配置
- 考研初试将近，收好这份准备清单，祝你一战成硕
- Golang gRPC实践 连载五 拦截器 Interceptor
- 穿越火线显示无法连接服务器,穿越火线无法连接服务器是什么原因
- 市电220V说的是峰峰值还是有效值呢？
- 初学云计算：华为vs阿里vs红帽，如何选择？
- wordpress基础插件开发3-add_action()案例研究
- 使用Python进行文件快速搜索（建立文件搜索索引）
- github访问加速
- 【Oracle】建立关联三个表的视图
- java1000字节是多少汉字_面试官：Java 中有几种基本数据类型是什么？各自占用多少字节？...
- Android设备唯一识别码的获取
- xen中HVM的安装