js如何实现抽奖转盘

外圆留空多少的问题

PS里查看间距是多少,此处圆心(203203)大圆的半径就是203 - 10=193

这个数值在下图里设置

js

 & lt;脚本类型=拔谋?javascript"比;
　　var转盘={
　　restaraunts:[],//大转盘奖品名称
　　颜色:[],//大转盘奖品区块对应背景颜色
　　outsideRadius: 193//大转盘外圆的半径192
　　textRadius: 155//大转盘奖品位置距离圆心的距离
　　insideRadius: 68//大转盘内圆的半径
　　startAngle: 0,//开始角度
　　
　　bRotate:假//假:停止;真正的:旋转
　　}；
　　
　　$(文档)时函数(){//动态添加大转盘的奖品与奖品区域背景颜色
　　转盘。restaraunts=[“50元代金券”,“升职加薪“,“100元代金券”,“财源滚滚“,“200元代金券”,“爱情甜蜜“,“500元代金券”,“变美变帅“);
　　转盘。颜色=[“# 1 b62ca",“# 1 bacff",“# 1 b62ca",“# 1 bacff",“# 1 b62ca",“# 1 bacff",“# 1 b62ca",“# 1 bacff"];
　　
　　
　　var rotateTimeOut=function () {
　　$ (& # 39;# wheelcanvas& # 39;) .rotate ({
　　角度:0,
　　animateTo: 2160,
　　持续时间:8000
　　回调函数:函数(){
　　警报(& # 39;网络超时,请检查您的网络设置! & # 39;);
　　}
　　});
　　}；//旋转转盘项目:奖品位置;txt:提示语;
　　var rotateFn=函数(项目,txt) {
　　var角=条目* (360/turnplate.restaraunts.length) - (360/(turnplate.restaraunts.length * 2));
　　如果(angles<270) {
　　角=270 -角度;
　　其他}{
　　角=360 -角+ 270;
　　}
　　$ (& # 39;# wheelcanvas& # 39;) .stopRotate ();
　　$ (& # 39;# wheelcanvas& # 39;) .rotate ({
　　角度:0,
　　animateTo:角+ 1800,
　　持续时间:8000
　　回调函数:函数(){
　　警报(txt);
　　转盘。bRotate=! turnplate.bRotate;
　　}
　　});
　　}；
　　
　　美元(& # 39;.pointer& # 39;)。点击(函数(){
　　如果(turnplate.bRotate)返回;
　　转盘。bRotate=! turnplate.bRotate;//获取随机数(奖品个数范围内)
　　var项=rnd (1、turnplate.restaraunts.length);//奖品数量等于10日指针落在对应奖品区域的中心角度(252、216、180、144、108、72年,36岁,360年,324年,288年)
　　rotateFn(项目,turnplate.restaraunts(第1项));/*开关(项){
　　案例1:
　　rotateFn(252年,turnplate.restaraunts [0]);
　　打破;
　　案例2:
　　rotateFn(216年,turnplate.restaraunts [1]);
　　打破;
　　案例3:
　　rotateFn(180年,turnplate.restaraunts [2]);
　　打破;
　　案例4:
　　rotateFn(144年,turnplate.restaraunts [3]);
　　打破;
　　例5:
　　rotateFn(108年,turnplate.restaraunts [4]);
　　打破;
　　例6:
　　rotateFn(72年,turnplate.restaraunts [5]);
　　打破;
　　例7:
　　rotateFn(36岁,turnplate.restaraunts [6]);
　　打破;
　　例8:
　　rotateFn(360年,turnplate.restaraunts [7]);
　　打破;
　　例9:
　　rotateFn(324年,turnplate.restaraunts [8]);
　　打破;
　　例10:
　　rotateFn(288年,turnplate.restaraunts [9]);
　　打破;
　　} */console.log(项);
　　});
　　});
　　
　　函数rnd (n, m) {
　　var随机=Math.floor (math . random () * (m n + 1) + n);
　　返回随机;
　　
　　}//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
　　window=function () {
　　drawRouletteWheel ();
　　}；
　　
　　函数drawRouletteWheel () {
　　画布var=. getelementbyid (“wheelcanvas");
　　如果(canvas.getContext) {//根据奖品个数计算圆周角度
　　var=弧数学。π/(turnplate.restaraunts.length/2);//圆周率/奖品数量除以2
　　var ctx=canvas.getContext (“2 d");//在给定矩形内清空一个矩形
　　ctx.clearRect (0, 0422422);//strokeStyle属性设置或返回用于笔触的颜色,渐变或模式
　　ctx。strokeStyle=? FFBE04";//字体属性设置或返回画布上文本内容的当前字体属性
　　ctx。微软字体=& # 39;16 px YaHei& # 39;;//绘制圆(弧形)
　　(var=0;我& lt;turnplate.restaraunts.length;我+ +){
　　var角=转盘。startAngle + i *弧;
　　ctx。fillStyle=turnplate.colors[我];
　　ctx.beginPath ();//弧(x, y, r,起始角,结束角,绘制方向)方法创建?曲线(用于创建圆或部分圆)
　　ctx。弧(203、203、转盘。outsideRadius,角,角+弧,假);//绘制外圆
　　ctx。弧(203、203、转盘。insideRadius,角+弧角,真正);//绘制内圆
　　ctx.stroke ();
　　ctx.fill ();//锁画布(为了保存之前的画布状态)
　　ctx.save ();//嬷平逼房? - - - -
　　ctx。fillStyle=? FFF"/*奖品文字颜色*/var文本=turnplate.restaraunts[我];
　　var line_height=17;//翻译方法重新映射画布上的(0,0)位置
　　ctx。翻译(211 +数学。因为(角+?2)*转盘。textRadius 211 +数学。罪(角+?2)* turnplate.textRadius);//旋转方法旋转当前的绘图
　　ctx。旋转(角度+?2 +数学。π/2);/* *下面代码根据奖品类型,奖品名称长度渲染不同效果,如字体,颜色,图片效果。(具体根据实际情况改变)* */如果(text.indexOf (“M")在0){//流量包
　　var=text.split文本(“M");
　　(var j=0;j
js如何实现抽奖转盘