https://store.sgsonline.com.cn/app/topc/statics/scripts/lottery.js?1599222418

1var turnplate = {
2    restaraunts:[],
3    //大转盘奖品名称
4    colors:[],
5    //大转盘奖品区块对应背景颜色
6    outsideRadius:175,
7    //大转盘外圆的半径
8    textRadius:135,
9    //大转盘奖品位置距离圆心的距离
10    insideRadius:55,
11    //大转盘内圆的半径
12    startAngle:0,
13    //开始角度
14    bRotate:false
15};
16
17function readyTurnplate(restaraunts, colors, actionUrl, params, limitEle, regionData, regionUrl, saveurl) {
18    //动态添加大转盘的奖品与奖品区域背景颜色
19    turnplate.restaraunts = restaraunts;
20    turnplate.colors = colors;
21    var rotateTimeOut = function() {
22        $("#wheelcanvas").rotate({
23            angle:0,
24            animateTo:2160,
25            duration:8e3,
26            callback:function() {
27                Message.error("网络超时，请检查您的网络设置！");
28            }
29        });
30    };
31    //旋转转盘 item:奖品位置; txt：提示语;
32    var rotateFn = function(item, txt, redirect, dataEl, responseData) {
33        var angles = item * (360 / turnplate.restaraunts.length) - 360 / (turnplate.restaraunts.length * 2);
34        if (angles < 270) {
35            angles = 270 - angles;
36        } else {
37            angles = 360 - angles + 270;
38        }
39        $("#wheelcanvas").stopRotate();
40        $("#wheelcanvas").rotate({
41            angle:0,
42            animateTo:angles + 1800,
43            duration:8e3,
44            callback:function() {
45                //弹出抽到的奖品
46                var lotteryType = txt.substring(txt.indexOf('-')+1, txt.indexOf('+'));
47                txt = "恭喜你，获得" + txt.substr(txt.indexOf('+') + 1);
48                if(lotteryType == 'none') {
49                    Message.error("很遗憾，未中奖！");
50                } else if(lotteryType == 'hongbao'){
51                    if(responseData.hongbaotype != null && responseData.hongbaotype == "stochastic") {
52                        txt = "恭喜你，获得随机红包" + responseData.hongbaomoney + "元";
53                    } else {
54                        txt = "恭喜你，获得红包" + responseData.hongbaomoney + "元";
55                    }
56                    Message.success(txt);
57                } else {
58                    Message.success(txt);
59                }
60                turnplate.bRotate = !turnplate.bRotate;
61            }
62        });
63    };
64    $(".pointer").click(function() {
65        var lotteryLimit = Number($.trim($(".prize-result").find(".lotter-limit").text()));
66        if (turnplate.bRotate) return;
67        turnplate.bRotate = !turnplate.bRotate;
68        params.lottery_joint_limit = lotteryLimit;
69        $.post(actionUrl, params, function(rs) {
70            if(rs.error) {
71                Message.error(rs.message);
72                turnplate.bRotate = !turnplate.bRotate;
73
74                if(rs.redirect) {
75                    setTimeout(function() {
76                        window.location.href = rs.redirect;
77                    }, 1500);
78                }
79            }
80            if(rs.success) {
81                var redirect = rs.redirect;
82                var id = rs.message.id
83                limitEle.text(rs.message.lottery_joint_limit);
84               
85                //获取中奖奖品的索引值
86                var index = 0;
87                for(var i = 0; i < turnplate.restaraunts.length; i++) {
88                    if(turnplate.restaraunts[i].indexOf(id + '-') == 0) {
89                        index = i;
90                        break;
91                    }
92                } 
93                var regionData = $(this).parent().find('label');
94                rotateFn(index + 1 , turnplate.restaraunts[index], redirect, regionData, rs.message);
95            }
96        });
97    });
98}
99
100function rnd(n, m) {
101    var random = Math.floor(Math.random() * (m - n + 1) + n);
102    return random;
103}
104
105function drawRouletteWheel() {
106    var canvas = document.getElementById("wheelcanvas");
107    if (canvas.getContext) {
108        //根据奖品个数计算圆周角度
109        var arc = Math.PI / (turnplate.restaraunts.length / 2);
110        var ctx = canvas.getContext("2d");
111        //在给定矩形内清空一个矩形
112        ctx.clearRect(0, 0, 422, 422);
113        //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
114        ctx.strokeStyle = "#FFBE04";
115        //font 属性设置或返回画布上文本内容的当前字体属性
116        ctx.font = "16px Microsoft YaHei";
117        for (var i = 0; i < turnplate.restaraunts.length; i++) {
118            var angle = turnplate.startAngle + i * arc;
119            ctx.fillStyle = turnplate.colors[i];
120            ctx.beginPath();
121            //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
122            ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
123            ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
124            ctx.stroke();
125            ctx.fill();
126            //锁画布(为了保存之前的画布状态)
127            ctx.save();
128            //----绘制奖品开始----
129            ctx.fillStyle = "#E5302F";
130            var key = turnplate.restaraunts[i].substring(0, turnplate.restaraunts[i].indexOf('-'));
131            var lotteryType = turnplate.restaraunts[i].substring(turnplate.restaraunts[i].indexOf('-')+1, turnplate.restaraunts[i].indexOf('+'));
132            var text = turnplate.restaraunts[i].substr(turnplate.restaraunts[i].indexOf('+')+1);
133            var line_height = 17;
134            //translate方法重新映射画布上的 (0,0) 位置

135            ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
136            //rotate方法旋转当前的绘图
137            ctx.rotate(angle + arc / 2 + Math.PI / 2);
138            /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
139            if (text.indexOf("M") > 0) {
140                //流量包
141                var texts = text.split("M");
142                for (var j = 0; j < texts.length; j++) {
143                    ctx.font = j == 0 ? "bold 16px Microsoft YaHei" :"14px Microsoft YaHei";
144                    if (j == 0) {
145                        ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
146                    } else {
147                        ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
148                    }
149                }
150            } else if (text.indexOf("M") == -1 && text.length > 6) {
151                //奖品名称长度超过一定范围 
152                text = text.substring(0, 6) + "||" + text.substring(6);
153                var texts = text.split("||");
154                for (var j = 0; j < texts.length; j++) {
155                    ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
156                }
157            } else {
158                //在画布上绘制填色的文本。文本的默认颜色是黑色
159                //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
160                ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
161            }
162            //添加对应图标
163            if (lotteryType == "point") {
164                var img = document.getElementById("point_" + key);
165                if(img != null) {
166                    img.onload = function() {
167                        ctx.drawImage(img, -20, 10, 40, 40);
168                    };
169                    ctx.drawImage(img, -20, 10, 40, 40);
170                }
171             } 
172            else if (lotteryType == "none") {
173                var img = document.getElementById("none_" + key);
174                if(img != null) {
175                    img.onload = function() {
176                        ctx.drawImage(img, -20, 10, 40, 40);
177                    };
178                    ctx.drawImage(img, -20, 10, 40, 40);
179                }
180            } 
181            else if (lotteryType == "hongbao") {
182                var img = document.getElementById("hongbao_" + key);
183                if(img != null) {
184                    img.onload = function() {
185                        ctx.drawImage(img, -20, 10, 40, 40);
186                    };
187                    ctx.drawImage(img, -20, 10, 40, 40);
188                }
189            } 
190            else if(lotteryType == "custom"){
191                var img = document.getElementById("custom_" + key);
192                if(img != null) {
193                    img.onload = function() {
194                        ctx.drawImage(img, -20, 10, 40, 40);
195                    };
196                    ctx.drawImage(img, -20, 10, 40, 40);
197                }
198            }
199            //把当前画布返回（调整）到上一个save()状态之前 
200            ctx.restore();
201        }
202    }
203}