JS抽奖大转盘 脚本方法

/*此版本为非完整版。。。正在完善中；使用方法：var cases=new LotteryTurntable()cases.thisObjectName("cases");//设置对象实例名（必要）cases.InitialiseTurntable();//初始化抽奖转盘（必要），须在页面加载完成之后调用其他为自定义参数自行设置*/function LotteryTurntable() { //=================================================================== //可供用户设置的属性 //转盘的大小尺寸 this.setTurntableSize = function (size) { if (!isNaN(size)) setTurntableSize = size; else alert("转盘的大小尺寸参数格式错误！"); }; //保存转盘的容器的id号 this.setTurntableContainerId = function (ids) { setTurntableContainerId = ids; }; //颜色数组 this.setColorArray = function (colorArray) { setColorArray = colorArray; }; //奖项数组 this.setTextArray = function (textArray) { setTextArray = textArray; }; //概率数组 this.setChanceArray = function (chanceArray) { setFanNumber = chanceArray.length; angleVariable = (2 * Math.PI) / setFanNumber; setChanceArray = chanceArray; }; //奖项图片数组 this.setImageArray = function (imageArray) { setImageArray = imageArray; }; //最大旋转圈数 this.setMaxRotateNumber = function (number) { if (!isNaN(number)) setMaxRotateNumber = number; else alert("最大旋转圈数参数格式错误！"); }; //最小旋转圈数 this.setMinRotateNumber = function (number) { if (!isNaN(number)) setMinRotateNumber = number; else alert("最小旋转圈数参数格式错误！"); }; //概率缺省时所指向的奖品数组索引 this.setChanceDefaultValue = function (index) { if (!isNaN(index)) setChanceDefaultValue = index; else alert("概率缺省时所指向的奖品数组索引参数格式错误！"); }; //转盘中央的按钮图片路径 this.setCenterButImagePath = function (imagePanth) { setCenterButImagePath = imagePanth; }; //转盘实例对象名 this.thisObjectName = function (objectName) { thisObjectName = objectName; }; //设置文字绘制的半径 this.setTextDrawRadius = function (radius) { if (!isNaN(radius)) textRadius = radius; else alert("设置文字绘制的半径参数格式错误！"); }; //设置文字绘制的大小 this.setTextDrawSize = function (size) { if (!isNaN(size)) setTextDrawSize = size; else alert("设置文字绘制的大小参数格式错误！"); }; //绘制文字的颜色 this.setTextDrawColor = function (color) { setTextDrawColor = color; }; //设置转盘的位置布局类型，默认值为relative this.setTurntablePosition = function (position) { setTurntablePosition = position;}; //设置转盘的据顶部的距离; this.setTurntableTop = function (top) { setTurntableTop = top; }; //设置转盘距离右边的距离 this.setTurntableLeft = function (left) { setTurntableLeft = left; }; //获取中奖的索引号 this.getOptTrophyIndex = function () { return optTrophyIndex; }; //获取中奖的奖项 this.getOptTrophyItem = function () { return setTextArray[optTrophyIndex]; }; //设置转盘旋转完成后所执行的函数 this.finishFunction = function (finishFunctions) { finishFunction = finishFunctions; }; this.testObject = true;//测试转盘实例化对象名是否存在 //================================================================== var setTurntableSize =280;//转盘的大小尺寸 var setTurntableContainerId = "div1";//保存转盘的容器的id号 var setColorArray = ["#ff7f50", "#ffe4c4", "#ff7f50", "#ffe4c4", "#ff7f50", "#ffe4c4", "#ff7f50", "#ffe4c4", "#ff7f50", "#ffe4c4", "#ff7f50", "#ffe4c4", "#ff7f50", "#ffe4c4", "#ff7f50"];//颜色数组 var setTextArray = ["一等奖", "谢谢参与", "三等奖", "二等奖", "要加油啦", "一等奖", "二等奖", "祝您好运", "三等奖", "不要灰心", "三等奖"];//奖项数组 var setChanceArray = [0.01, 0.01, 0.01, 0.01, 0.01, 0.05, 0.05, 0.05, 0.5, 0.3];//概率数组 var setImageArray = ["a.jpg", "b.jpg", "c.jpg", "d.jpg", "e.jpg", "f.jpg", "g.jpg"];//奖项图片数组 var setFanNumber = 10;//扇叶数量 var setMaxRotateNumber = 5;//最大旋转圈数 var setMinRotateNumber = 3;//最小旋转圈数 var setChanceDefaultValue = 1;//概率缺省时所指向的奖品数组索引 var setCenterButImagePath = "/NewYF/image/wheel/2.png";//转盘中央的按钮图片路径 var thisObjectName="cases";//转盘实例对象名 var textRadius = setTurntableSize * 0.7 / 2;//设置文字绘制的半径 var setTurntablePosition = "relative";//设置转盘的布局类型 var setTurntableTop = 10;//设置转盘的据顶部的距离; var setTurntableLeft = 10;//设置转盘距离右边的距离 var finishFunction = function () { }; var setTextDrawSize = 14;//绘制文字的大小 var setTextDrawColor = "black";//绘制文字的颜色 //================================================================== //程序的全局变量不应修改 var optTrophyIndex = 0;//中奖的索引号 var angleVariable = (2 * Math.PI) /setFanNumber;//转盘扇叶的角度量 var startAngle = 0;//绘制转盘扇叶的开始角度 var endAngle = 0;//绘制转盘扇叶的结束角度 var rotateAngle = 0;//每次旋转的角度 //var rotateNumber = 100;//每次启动旋转的圈数 var time = 20;//间隔时间 //var addSpeed = 0.04;//主盘转动的加速度 var subtractSpeed = 0.005;//主盘转动的减速率 var finishStartAngle = 0;//旋转结束时的起始角度 var dates = new Date(); var canvaOnlyId = "canva" dates.getTime() "Id";//画布canvas的唯一id号 var rotateNumber = 0;//转盘旋转的次数 var errorFlag = false; //==================================================================== //初始化转盘元素 this.InitialiseTurntable = function () { var containerElement = window.document.getElementById(setTurntableContainerId);//存放转盘内容的容器对象 if (thisObjectName == "") { alert("未设置“thisObjectName”当前实例对象名！") return; } var canva = "<div style='overflow:hidden;width:" setTurntableSize "px;height:" setTurntableSize "px; position:" setTurntablePosition "; top:" setTurntableTop "px;left:" setTurntableLeft "px;' > "; canva = "<canvas id=\"" canvaOnlyId "\" width='" setTurntableSize "' height='" setTurntableSize "' style=\" border:none;margin:0px;position:relative;\"></canvas>"; //如果图片路径不为空 if (setCenterButImagePath != "") { canva = "<img src='" setCenterButImagePath "' style=\"position:relative;top:" (-setTurntableSize / 2 - setTurntableSize / 10-17) "px;left:" (setTurntableSize / 2 - setTurntableSize / 10) "px;"; canva = "width:" setTurntableSize / 5 "px;height:" (setTurntableSize 60) / 5 "px;\" onclick=\" " "danji()\" onerror=\" " thisObjectName ".LoadError() \" /></div>"; } else { canva = "<canvas id='" canvaOnlyId "Button' width=" setTurntableSize / 5 " height=" setTurntableSize / 5 " style='position:relative;"; canva = "top:" (-setTurntableSize / 2 - setTurntableSize / 10 - 4) "px;left:" (setTurntableSize / 2 - setTurntableSize / 10) "px;' onclick=\"" thisObjectName ".UseTurntable()\"></canvas></div>"; errorFlag = true; } try{ if (containerElement == null) { window.document.body.innerHTML = canva } else { containerElement.innerHTML = canva; } }catch(e){ alert(e " 请将页面加载完成后调用！"); return; } this.DrawTurntable(); } //转盘中央的按钮图片加载失败执行函数 this.LoadError = function () { alert('转盘中央的按钮图片路径无效！') } ///执行的入口方法 this.UseTurntable= function() { if (rotateNumber > 0) { return; } //获取随机减速度 for (var i = 0; true; i ) { var ran = Math.random(); if (parseInt(ran * 100) > 10 && parseInt(ran * 100) < 50) { subtractSpeed = parseInt(ran * 100) / 10000; break; } } optTrophyIndex = ReckonChance(setChanceArray); if (isNaN(optTrophyIndex)) { alert(optTrophyIndex); return; } // window.document.getElementById("pp").value = setTextArray[optTrophyIndex] "--" optTrophyIndex; ControlRotate(optTrophyIndex); } //绘制转盘内容 this.DrawTurntable = function() { var canvas = window.document.getElementById(canvaOnlyId);//绘制的canvas区域 if (canvas.getContext) { var cav = canvas.getContext("2d"); //绘制外圆 cav.beginPath(); cav.arc((setTurntableSize / 2), (setTurntableSize / 2), setTurntableSize / 2, 0, 2 * Math.PI, false); //cav.arc((setTurntableSize / 2), (setTurntableSize / 2), setTurntableSize / 2, endAngle, startAngle, true); var my_gradient = cav.createRadialGradient(setTurntableSize / 2, setTurntableSize / 2, setTurntableSize / 2, setTurntableSize / 2, setTurntableSize / 2, setTurntableSize / 2 - setTurntableSize/20); my_gradient.addColorStop(1, "#ffff00"); my_gradient.addColorStop(0, "white"); cav.fillStyle = my_gradient; cav.fill(); cav.save(); CoreRotateArea(cav); if (errorFlag == true && window.document.getElementById(canvaOnlyId "Button") != null) { DrawCenterButton(); } } } //绘制中心动态旋转区 function CoreRotateArea(cav) { //var textRadius =100;//文字到中心点的距离 var circleStartRotate = 0;//圆的开始角度 for (var i = 0; i < setFanNumber; i ) { circleStartRotate = startAngle angleVariable * i; cav.beginPath(); cav.arc((setTurntableSize / 2), (setTurntableSize / 2), (setTurntableSize / 2 - setTurntableSize/20), circleStartRotate, circleStartRotate angleVariable, false); cav.arc((setTurntableSize / 2), (setTurntableSize / 2), setTurntableSize/10, circleStartRotate angleVariable, circleStartRotate, true); cav.fillStyle = setColorArray[i % (setColorArray.length-1)]; cav.fill(); cav.save(); //绘制文字 var angle = startAngle angleVariable * i cav.shadowOffsetX = -1; cav.shadowOffsetY = -1; cav.shadowBlur = 0; cav.shadowColor = "rgb(220,220,220)"; cav.fillStyle = setTextDrawColor; cav.translate(setTurntableSize / 2 Math.cos(angle angleVariable / 2) * textRadius, setTurntableSize / 2 Math.sin(angle angleVariable / 2) * textRadius); cav.rotate(angle angleVariable / 2 Math.PI / 2); var text = setTextArray[i % (setTextArray.length-1)]; cav.font = 'bold ' setTextDrawSize 'px 幼圆'; var y=-10; for(var j=0; j<text.length;j ){ cav.fillText(text.substring(j, j 1), -5, y=y 15); } cav.restore(); } cav.fillStyle = "#090e28"; cav.beginPath(); cav.moveTo(setTurntableSize / 2 - setTurntableSize/30, setTurntableSize / 2); cav.lineTo(setTurntableSize / 2, setTurntableSize / 4); cav.lineTo(setTurntableSize / 2, setTurntableSize / 2); cav.fill(); cav.save(); cav.fillStyle = "#868ebd"; cav.beginPath(); cav.moveTo(setTurntableSize / 2, setTurntableSize / 2); cav.lineTo(setTurntableSize / 2, setTurntableSize / 4); cav.lineTo(setTurntableSize / 2 setTurntableSize / 30, setTurntableSize / 2); cav.fill(); cav.save(); } //绘制转盘中间按钮 function DrawCenterButton() { var canvasd = window.document.getElementById(canvaOnlyId "Button"); var draw = canvasd.getContext("2d"); draw.arc(setTurntableSize / 10, setTurntableSize / 10, setTurntableSize / 10, 0, 2 * Math.PI); var my_gradient = draw.createRadialGradient(setTurntableSize / 10, setTurntableSize / 10, setTurntableSize / 10, setTurntableSize / 10, setTurntableSize / 10, setTurntableSize / 10 - setTurntableSize / 40); my_gradient.addColorStop(1, "#666aaa"); my_gradient.addColorStop(0, "#b69ddf"); if (navigator.userAgent.indexOf("Firefox") > 0) { draw.fillStyle = "#abcdef"; } else { draw.fillStyle = my_gradient; } draw.fill(); draw.save(); draw.fillStyle = "yellow"; draw.font = 'bold ' (setTurntableSize / 20) 'px 幼圆'; draw.fillText("抽奖", setTurntableSize / 20 , setTurntableSize / 9); } //计算概率并获取随机值 //参数为概率数组 //返回值为随机中奖号 //或错误提示信息 function ReckonChance(trophyChanceArray) { //判断概率数组是否合法 var countChance = 0; for (var n = 0; n < trophyChanceArray.length; n ) { if (trophyChanceArray[n] < 0) { return "概率数组不合法！不能小于‘0’！"; } countChance = trophyChanceArray[n]; } if (countChance > 1) { return countChance "概率数组不合法！不能大于‘ 1 ’！"; } //计算最大有效值的概率值 var maxValidValue = trophyChanceArray[0]; for (var max = 1; max < trophyChanceArray.length; max ) { if (trophyChanceArray[max].toString().length > maxValidValue.toString().length || (trophyChanceArray[max].toString().length == maxValidValue.toString().length && trophyChanceArray[max] > maxValidValue)) { maxValidValue = trophyChanceArray[max]; } } if (maxValidValue == 0) { return "奖品已经发完！请继续关注我们的活动！"; } //计算最小概率的分度 var degree = 1;//存储概率的分布点数组的长度 for (var fd = 0; fd < 10; fd ) { var f = maxValidValue * degree; if (parseInt(f) == f) { break; } degree *= 10; } //存储概率的分布点 var chanceSpreadArray = new Array(degree); //将概率分布点随机分配到数组中 for (var gl = 0; gl < trophyChanceArray.length; gl ) { var num = parseInt(trophyChanceArray[gl] * degree); for (var i = 0; i < num; i ) { var ran = parseInt(Math.random() * degree); if (chanceSpreadArray[ran] == undefined) chanceSpreadArray[ran] = gl; else i--; } } //获取通过概率获取的随机值 var rand = 0; for (var k = 0; true; k ) { rand = parseInt(Math.random() * degree); if (rand >= 0) { break; } } var trophyId = chanceSpreadArray[rand]; if (trophyId == undefined) { trophyId = setChanceDefaultValue; } return trophyId; } //控制转盘旋转到指定位置 //参数为随机中奖号 function ControlRotate(trophyId) { var pitchOnArea = (1.5 * Math.PI) - (angleVariable / 2);// 指针指示的中奖区域的起始幅度 finishStartAngle = pitchOnArea - (angleVariable * trophyId);//结束时的起始位置 if (finishStartAngle < 0) { finishStartAngle = pitchOnArea (0.5 * Math.PI finishStartAngle); } var revolveNum = 0;//随机获取旋转的圈数 for (var p = 0; true; p ) { revolveNum = parseInt(Math.random() * setMaxRotateNumber); if (revolveNum < setMaxRotateNumber && revolveNum > setMinRotateNumber) { break; } } var range = (revolveNum * Math.PI * 2) ((finishStartAngle % (Math.PI * 2)) - (startAngle % (Math.PI * 2))); //旋转的总幅度 rotateNumber = parseInt((Math.sqrt(4 * (range * 2 / subtractSpeed) 1) 1) / 2);//计算旋转的次数 rotateAngle = range * 2 / rotateNumber;//计算初速度 subtractSpeedRotate(rotateNumber); } //减速旋转 //参数1、旋转总次数 function subtractSpeedRotate(range) { var timeoutId = setTimeout(function () { startAngle = rotateAngle; endAngle = startAngle angleVariable; var canvas =window.document.getElementById(canvaOnlyId);//绘制的canvas区域 var cav = canvas.getContext("2d"); if (range > 0) { if (canvas.getContext) { CoreRotateArea(cav); } rotateAngle -= subtractSpeed; range -= 1; subtractSpeedRotate(range); } else { startAngle = startAngle % (Math.PI * 2); //纠正转盘 var gap = finishStartAngle - startAngle; if (gap > 0 ) { RectifyTurntable(cav, Math.abs(gap), subtractSpeed); }else if (gap < 0) { RectifyTurntable(cav, Math.abs(gap), -subtractSpeed); } else { finishFunction(); } rotateNumber = 0; clearTimeout(timeoutId); return; } }, time ); } //转盘停止的位置停止的位置 this.CeasePosition=function() { var ceaseStartAngle = startAngle % (2 * Math.PI); var pitchOnArea = 1.5 * Math.PI - (angleVariable / 2); var ceasePos = Math.round((pitchOnArea - ceaseStartAngle) / angleVariable);//停止的位置 if (ceasePos < 0) { ceasePos = setFanNumber; } return ceasePos; } //纠正转盘 function RectifyTurntable(cav, gap, speeds) { if (gap <= angleVariable / 4 || Math.abs(finishStartAngle - startAngle % (Math.PI * 2)) < angleVariable * 0.3) { finishFunction(); return; } gap -= Math.abs(speeds); startAngle = speeds setTimeout(function () { CoreRotateArea(cav); RectifyTurntable(cav, gap, speeds); }, time); }}