利用jQuery旋转插件jqueryrotate制作转盘抽奖

最新推荐文章于 2025-05-07 15:05:05 发布

原创最新推荐文章于 2025-05-07 15:05:05 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何利用jQuery的旋转插件jqueryrotate来实现转盘抽奖的交互功能。提供了详细的原文链接和下载资源，包括可能需要用到的ajax数据文件。

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

这里写图片描述

原文链接：http://www.cnblogs.com/bingwei/p/4830932.html

下载地址：http://download.youkuaiyun.com/detail/cometwo/9602323

<!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">        <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>
  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

/*初始化样式*/body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,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';}
  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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

// 判断是不是移动设备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请求服务器数据，添加大转盘的奖品与奖品区域背景颜色    /*    $.ajax({        type: "POST",        url: "~/../json/data.json",        data: null,        async:false,        dataType:"json", // 返回数据类型        success: function(data){            turnWheel.rewardNames = data["rewardNames"];            turnWheel.colors = data["colors"];        },        error: function(data){            alert("网络错误，请检查您的网络设置！");            $("#tip").text("请求数据失败");        }    });    */    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);    });});/*返回在n和m之间的随机整数n<= random <=m*/function randomNum(n, m) {    /* Math.floor(Math.random()*10);时，可均衡获取0到9的随机整数。 */    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();        /*         * 画圆弧，和IOS的Quartz2D类似         * context.arc(x,y,r,sAngle,eAngle,counterclockwise);         * x :圆的中心点x         * y :圆的中心点x         * sAngle,eAngle :起始角度、结束角度         * counterclockwise : 绘制方向,可选，False = 顺时针，true = 逆时针         * */        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 属性以另一种颜色/渐变来渲染文本        /*         * context.fillText(text,x,y,maxWidth);         * 注意！！！y是文字的最底部的值，并不是top的值！！！         * */        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();        /*----绘制奖品结束----*/    }}
  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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249

如果用到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"]}
  1
2
3
4
5
6
7
8
9
10
11
<
   
   
   给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow