实例介绍
【实例简介】
【实例截图】
【实例截图】
【核心代码】
/*
此版本为非完整版。。。正在完善中；
使用方法：
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);
}
}
好例子网口号：伸出你的我的手 — 分享！
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论