扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >怎么使用jQuery旋转插件jqueryrotate制作转盘抽奖
  • 291

0
分享到

怎么使用jQuery旋转插件jqueryrotate制作转盘抽奖

2024-04-02 19:04:59 291人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了“怎么使用Jquery旋转插件jqueryrotate制作转盘抽奖”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么使用jQuery旋转

这篇文章主要为大家展示了“怎么使用Jquery旋转插件jqueryrotate制作转盘抽奖”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么使用jQuery旋转插件jqueryrotate制作转盘抽奖”这篇文章吧。

具体内容如下

怎么使用jQuery旋转插件jqueryrotate制作转盘抽奖

原文链接：js HTML5 canvas绘制转盘抽奖

下载地址：jqueryrotate

<!DOCTYPE html>
<html>

 <head lang="en">
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-Scalable=no" />
 <title>抽奖转盘</title>
 <link rel="stylesheet" href="CSS/index.css" rel="external nofollow" >
 <script src="js/jquery-2.1.4.js"></script>
 <script src="js/jQueryRotate.js"></script>
 <script src="js/index.js"></script>
 </head>

 <body>
 <div class="content">
  <div class="wheel">
  <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
  <img class="pointer" src="images/wheel-pointer.png" />
  </div>
 </div>
 <div class="tips">
  <span id="tip">jason</span>
 </div>
 </body>

</html>


body,
ul,
ol,
li,
p,
h2,
h3,
h4,
h5,
h6,
h7,
fORM,
fieldset,
table,
td,
img,
div {
 margin: 0;
 padding: 0;
 border: 0;
}

ul,
ol {
 list-style-type: none;
}

select,
input,
img,
select {
 vertical-align: middle;
}

a {
 text-decoration: none;
 color: #000;
}

a:hover {
 color: #c00;
 text-decoration: none;
}

.clear {
 clear: both;
}

input {
 font-size: 12px;
}

body {
 color: #333;
 font-size: 12px;
 font-family: "Microsoft YaHei";
 background: #e62d2d;
 background: greenyellow;
 overflow-x: hidden;
}




.content {
 display: block;
 width: 95%;
 
 margin: 30px auto;
}

.content .wheel {
 display: block;
 width: 100%;
 position: relative;
 
 background-image: url(../images/wheel-bg.png);
 background-size: 100% 100%;
}

.content .wheel canvas.item {
 width: 100%;
}

.content .wheel img.pointer {
 position: absolute;
 width: 31.5%;
 height: 42.5%;
 left: 34.3%;
 top: 23%;
}

.tips {
 text-align: center;
 margin: 20px 0;
 color: red;
 font: normal 24px 'MicroSoft YaHei';
}
// 判断是不是移动设备
var isMobile = {
 Android: function() {
 return navigator.userAgent.match(/Android/i) ? true : false;
 },
 BlackBerry: function() {
 return navigator.userAgent.match(/BlackBerry/i) ? true : false;
 },
 iOS: function() {
 return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
 },
 windows: function() {
 return navigator.userAgent.match(/IEMobile/i) ? true : false;
 },
 any: function() {
 return(isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 }
};

var turnWheel = {
 rewardNames: [], //转盘奖品名称数组
 colors: [], //转盘奖品区块对应背景颜色
 outsideRadius: 192, //转盘外圆的半径
 textRadius: 155, //转盘奖品位置距离圆心的距离
 insideRadius: 68, //转盘内圆的半径
 startAngle: 0, //开始角度

 bRotate: false //false:停止;ture:旋转
};

// 图片信息
var imgQb = new Image();
imgQb.src = "~/../images/qb.png";
var imgSorry = new Image();
imgSorry.src = "~/../images/2.png";

$(document).ready(function() {

 // 模拟数据，可以ajax请求服务器数据，添加大转盘的奖品与奖品区域背景颜色
 

 turnWheel.rewardNames = [
 "5000M流量包", "10Q币",
 "谢谢参与", "5Q币",
 "10M流量包", "20M流量包",
 "10M流量包", "20M流量包",
 "20Q币 ", "30M流量包",
 "100M流量包", "2Q币"
 ];
 turnWheel.colors = [
 "#FFF4D7", "#FFFFFF",
 "#F0F4D8", "#FFFFFF",
 "#FFF4D0", "#FFFFFF",
 "#FFF4D0", "#FFFFFF",
 "#FFF4D6", "#FFFFFF",
 "#FFF4D6", "#FFFFFF"
 ];

 //旋转转盘 item:奖品序号，从0开始的; txt：提示语 ,count 奖品的总数量;
 function rotateFunc(item, tip, count) {

 // 应该旋转的角度，旋转插件角度参数是角度制。
 var baseAngle = 360 / count;
 // 旋转角度 == 270°（当前第一个角度和指针位置的偏移量） - 奖品的位置 * 每块所占的角度 - 每块所占的角度的一半(指针指向区域的中间)
 angles = 360 * 3 / 4 - (item * baseAngle) - baseAngle / 2; // 因为第一个奖品是从0°开始的，即水平向右方向
 $('#wheelCanvas').stopRotate();
 // 注意，jqueryrotate 插件传递的角度不是弧度制。
 // 哪个标签调用方法，旋转哪个控件
 $('#wheelCanvas').rotate({
  angle: 0, //初始旋转的角度数，并且立即执行
  animateTo: angles + 360 * 5, // 这里多旋转了5圈，圈数越多，转的越快
  duration: 8000, //指定使用animateTo的动画执行持续时间
  callback: function() { // 回调方法
  $("#tip").text(tip);
  turnWheel.bRotate = !turnWheel.bRotate;
  if(isMobile.any()) // 判断是否移动设备
  {
   // 调OC代码
   window.location.href = "turntable://test.com?" + "index=" + item + "&tip=" + tip;
  }
  }
 });
 };

 // 抽取按钮按钮点击触发事件
 $('.pointer').click(function() {
 // 正在转动，直接返回
 if(turnWheel.bRotate) return;

 turnWheel.bRotate = !turnWheel.bRotate;
 var count = turnWheel.rewardNames.length;

 // 这里应该是从服务器获取用户真实的获奖信息（对应的获奖序号）
 // 简单模拟随机获取奖品的序号(奖品个数范围内)
 var item = randomNum(0, count - 1);
 // 开始抽奖
 rotateFunc(item, turnWheel.rewardNames[item], count);
 });

});


function randomNum(n, m) {
 
 var random = Math.floor(Math.random() * (m - n)) + n;
 console.log("rewardNames["+random+"]");
 return random;

}

//页面所有元素加载完毕后执行drawWheelCanvas()方法对转盘进行渲染
window.onload = function() {
 drawWheelCanvas();
};


function drawWheelCanvas() {

 // 获取canvas画板，相当于layer？？
 var canvas = document.getElementById("wheelCanvas");
 // var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery获取的是包装过的对象，不是DOM对象,可以进行转换

 // 计算每块占的角度，弧度制
 var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
 // 获取上下文
 var ctx = canvas.getContext("2d");

 var canvasW = canvas.width; // 画板的高度
 var canvasH = canvas.height; // 画板的宽度
 //在给定矩形内清空一个矩形
 ctx.clearRect(0, 0, canvasW, canvasH);

 //strokeStyle 绘制颜色
 ctx.strokeStyle = "#FFBE04"; // 红色
 //font 画布上文本内容的当前字体属性
 ctx.font = '16px Microsoft YaHei';

 // 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
 // 画具体内容
 for(var index = 0; index < turnWheel.rewardNames.length; index++) {
 // 当前的角度
 var angle = turnWheel.startAngle + index * baseAngle;
 // 填充颜色
 ctx.fillStyle = turnWheel.colors[index];

 // 开始画内容
 // ---------基本的背景颜色----------
 ctx.beginPath();
 
 ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false);
 ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, true);
 ctx.stroke();
 ctx.fill();
 //保存画布的状态，和图形上下文栈类似，后面可以Restore还原状态（坐标还原为当前的0，0），
 ctx.save();

 
 // 红色字体
 ctx.fillStyle = "#E5302F";
 var rewardName = turnWheel.rewardNames[index];
 var line_height = 17;
 // translate方法重新映射画布上的 (0,0) 位置
 // context.translate(x,y);
 // 见PPT图片，
 var translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
 var translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
 ctx.translate(translateX, translateY);

 // rotate方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！
 // angle，当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90°
 ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);

 
 // canvas 的 measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
 // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本
 
 if(rewardName.indexOf("M") > 0) { //查询是否包含字段 流量包
  var rewardNames = rewardName.split("M");
  for(var j = 0; j < rewardNames.length; j++) {
  ctx.font = (j == 0) ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
  if(j == 0) {
   ctx.fillText(rewardNames[j] + "M", -ctx.measureText(rewardNames[j] + "M").width / 2, j * line_height);
  } else {
   ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
  }
  }
 } else if(rewardName.indexOf("M") == -1 && rewardName.length > 6) { //奖品名称长度超过一定范围
  rewardName = rewardName.substring(0, 6) + "||" + rewardName.substring(6);
  var rewardNames = rewardName.split("||");
  for(var j = 0; j < rewardNames.length; j++) {
  ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
  }
 } else {
  //在画布上绘制填色的文本。文本的默认颜色是黑色
  ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
 }

 //添加对应图标
 if(rewardName.indexOf("Q币") > 0) {
  // 注意，这里要等到img加载完成才能绘制
  imgQb.onload = function() {
  ctx.drawImage(imgQb, -15, 10);
  };
  ctx.drawImage(imgQb, -15, 10);

 } else if(rewardName.indexOf("谢谢参与") >= 0) {
  imgSorry.onload = function() {
  ctx.drawImage(imgSorry, -15, 10);
  };
  ctx.drawImage(imgSorry, -15, 10);
 }
 //还原画板的状态到上一个save()状态之前
 ctx.restore();

 

 }
}

如果用到ajax,date.JSON文件：

{
 "rewardNames":[
 "50M流量包","10Q币",
 "谢谢参与","5Q币",
 "10M流量包","20M流量包",
 "10M流量包","20M流量包",
 "20Q币 ","30M流量包",
 "100M流量包","2Q币"],
 "colors":[
 "#FFF4D7","#FFFFFF",
 "#F0F4D8","#FFFFFF",
 "#FFF4D0","#FFFFFF",
 "#FFF4D0","#FFFFFF",
 "#FFF4D6","#FFFFFF",
 "#FFF4D6","#FFFFFF"]
}

以上是“怎么使用jQuery旋转插件jqueryrotate制作转盘抽奖”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！

--结束END--

本文标题: 怎么使用jQuery旋转插件jqueryrotate制作转盘抽奖

本文链接: https://lsjlt.com/news/67026.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么使用jQuery旋转插件jqueryrotate制作转盘抽奖
    这篇文章主要为大家展示了“怎么使用jQuery旋转插件jqueryrotate制作转盘抽奖”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么使用jQuery旋转...
    99+
    2024-04-02
  • 怎么使用javascrip和HTML5 Canvas绘制转盘抽奖
    本文小编为大家详细介绍“怎么使用javascrip和HTML5 Canvas绘制转盘抽奖”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用javascrip和HTML5 Canvas绘制转盘抽奖”文章能帮助大家解决疑惑，下面跟着小编的...
    99+
    2023-07-04
  • 怎么使用c语言编写抽奖转盘
    编写抽奖转盘的C语言代码可以分为以下几个步骤：1. 导入必要的头文件：```c#include #include #include ...
    99+
    2023-08-15
    c语言
  • 怎么用CSS实现一个抽奖转盘
    这篇文章主要介绍“怎么用CSS实现一个抽奖转盘”，在日常操作中，相信很多人在怎么用CSS实现一个抽奖转盘问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现一个抽奖...
    99+
    2024-04-02
  • jquery怎么制作圆圈旋转效果
    在网页设计中，动画效果是非常重要的一部分，可以增加页面的趣味性和交互性。圆圈旋转是其中一种经典的动画效果。下面将介绍如何使用JQuery制作一个圆圈旋转的动画效果。HTML布局首先，需要在HTML文件中定义一个容器元素，用于包裹动画元素。在...
    99+
    2023-05-14
  • 使用vue怎么实现一个转盘抽奖功能
    本篇文章为大家展示了使用vue怎么实现一个转盘抽奖功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运...
    99+
    2023-06-07
  • Android中利用SurfaceView制作抽奖转盘的全流程攻略
    一、概述 今天给大家带来SurfaceView的一个实战案例，话说自定义View也是各种写，一直没有写过SurfaceView，这个玩意是什么东西？什么时候用比较好呢？ 可以看...
    99+
    2022-06-06
    抽奖转盘 surfaceview Android
  • jQuery UI旋转器部件Spinner Widget怎么使用
    这篇文章主要介绍“jQuery UI旋转器部件Spinner Widget怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jQuery UI旋转器部件Spinne...
    99+
    2023-06-30
  • 使用Canvas怎么绘制一个旋转的太极
    今天就跟大家聊聊有关使用Canvas怎么绘制一个旋转的太极，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。cssbody{    backgro...
    99+
    2023-06-09
  • vue项目中怎么使用pinyin转换插件
    今天小编给大家分享一下vue项目中怎么使用pinyin转换插件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。使用pinyin...
    99+
    2023-06-29
  • 怎么使用jQuery实现一个图片不停旋转动画效果
    这篇文章主要介绍“怎么使用jQuery实现一个图片不停旋转动画效果”，在日常操作中，相信很多人在怎么使用jQuery实现一个图片不停旋转动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用jQuer...
    99+
    2023-07-05
  • 使用python怎么操作内置进制转换函数
    这篇文章给大家介绍使用python怎么操作内置进制转换函数，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。dec = input('10进制数为：')print("转换为二进...
    99+
    2023-06-15
  • 使用html和css怎么制作一个可翻转登录注册界面
    这期内容当中小编将会给大家带来有关使用html和css怎么制作一个可翻转登录注册界面，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。Html<body>  <div&n...
    99+
    2023-06-08
  • 怎么使用Qt+GDAL库实现制作经纬度坐标转换工具
    今天小编给大家分享一下怎么使用Qt+GDAL库实现制作经纬度坐标转换工具的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1、功...
    99+
    2023-07-06
  • 在微信小程序中怎么使用canvas+Painter插件制作二维码
    本篇内容介绍了“在微信小程序中怎么使用canvas+Painter插件制作二维码”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、实现原理使...
    99+
    2023-06-25
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作