/** ?*?Created?by?Ouyang?on?2016/3/29. ?*?@description?轉盤抽獎邏輯類 ?*/ /** ?*?轉盤核心邏輯 ?*?*/ var?core?=?{ /**List*/ gifts:?["一等獎",?"二等獎",?"三等獎",?"四等獎",?"五等獎",?"六等獎",?"七等獎",?"八等獎",?"九等獎",?"十等獎"], /**隨機顏色*/ colors:?[], /***/ step:?2?*?Math.PI?/?10, /**外盤大小*/ outerR:?150, /**內盤大小*/ interR:?50, /**抽獎標識*/ LOTTERY_TAG:?null, init:?function()?{ for?(var?i?=?0;?i?<?core.gifts.length;?i++)?{ core.colors.push(this.getColor()); } var?canvas?=?document.getElementById("canvas"); var?context?=?canvas.getContext("2d"); var?deviceType?=?this.getDeviceType(); context.translate(250,?250); this.drawTurnTable(context); this.drawArrow(context); this.initEvent(deviceType); }, /**注冊觸碰事件*/ initEvent:?function(type)?{ var?btn?=?document.getElementById("btn_lottery"); btn.addEventListener(type?==?DEVICE_CONFIG.CHROME???"mousedown"?:?"touchstart",?function(event)?{ core.lottery(); }); }, /**抽獎*/ lottery:?function()?{ var?context?=?document.getElementById("canvas").getContext("2d"); if?(core.LOTTERY_TAG)?{ return?false; } /**總步數*/ var?step?=?TURNTABLE_CONFIG.BEGIN_ANGLE?+?Math.random()?*?10; /*角度*/ var?angle?=?0; core.LOTTERY_TAG?=?setInterval(function()?{ //核心關鍵點在這行代碼，轉盤之所以有一個線性漸變的過程 //因為step的值一直在變化，這個變化是一個線性的，有規律的，直到不滿足條件，跳出循環 //以前以為乘法后的值是遞增的，現在發現to?yang?to?simple，下面這個就是乘以小數會遞減 step?*=?TURNTABLE_CONFIG.RADIO; //console.log("總步驟:?"?+?step); if?(step?<=?0.1)?{ clearInterval(core.LOTTERY_TAG); core.LOTTERY_TAG?=?null; var?pos?=?Math.ceil(angle?/?36); console.log("pos:?"?+?pos); var?res?=?core.gifts[10?-?pos]; context.save();?//save()?方法把當前狀態的一份拷貝壓入到一個保存圖像狀態的棧中。這就允許您臨時地改變圖像狀態，然后，通過調用?restore()?來恢復以前的值。 context.beginPath(); context.font?=?"23px?微軟雅黑"; context.fillStyle?=?"#f00"; context.textAlign?=?"center"; context.textBaseline?=?"middle"; context.fillText(res,?0,?0); context.restore(); }?else?{ context.clearRect(-250,?-250,?500,?500); angle?+=?step; //一開始每個角度的值相差比較大，到了后面每個角度的值相差越來越小(開始慢慢減速) console.log("角度:?"?+?angle); if?(angle?>?360)?{ angle?-=?360; } context.save(); context.beginPath(); context.rotate(angle?*?Math.PI?/?180); core.drawTurnTable(context); context.restore(); core.drawArrow(context); } },?60); }, /**繪制轉盤（外盤和內盤）*/ drawTurnTable:?function(context)?{ var?size?=?core.gifts.length; var?colors?=?core.colors; for?(var?i?=?0;?i?<?size;?i++)?{ context.save(); context.beginPath(); context.moveTo(0,?0); context.fillStyle?=?colors[i];?//fillStyle?屬性設置或返回用于填充繪畫的顏色、漸變或模式。 context.arc(0,?0,?core.outerR,?i?*?core.step,?(i?+?1)?*?core.step); context.fill(); context.restore(); } context.save(); context.beginPath(); context.fillStyle?=?"#fff"; context.arc(0,?0,?core.interR,?0,?2?*?Math.PI); context.fill(); context.restore(); for?(var?i?=?0;?i?<?size;?i++)?{ context.save(); context.beginPath(); context.fillStyle?=?"#000"; context.font?=?"15px?微軟雅黑"; context.textAlign?=?"center"; context.textBaseline?=?"middle"; context.rotate(i?*?core.step?+?core.step?/?2); context.fillText(core.gifts[i],?(core.outerR?+?core.interR)?/?2,?0); context.restore();?//restore()?方法將繪圖狀態置為保存值 } }, /**繪制箭頭*/ drawArrow:?function(context)?{ context.save();?//save()?方法把當前狀態的一份拷貝壓入到一個保存圖像狀態的棧中。這就允許您臨時地改變圖像狀態，然后，通過調用?restore()?來恢復以前的值。 context.beginPath();?//beginPath()?方法在一個畫布中開始子路徑的一個新的集合。 context.lineWidth?=?5;?//線條的寬度 context.moveTo(0,?0); context.lineTo(20,?-20); context.lineTo(100,?0); context.lineTo(20,?20); context.closePath(); //??????context.lineTo(180,?15); //??????context.lineTo(180,?5); //??????context.lineTo(250,?5); //??????context.lineTo(250,?-5); //??????context.lineTo(180,?-5); //??????context.lineTo(180,?-15); //??????context.closePath();//closePath()?方法創建從當前點到開始點的路徑。 context.fill();?//填充 context.restore();?//restore()?方法將繪圖狀態置為保存值 }, /** ?*?獲得當前設備類型 ?*?*/ getDeviceType:?function()?{ var?userAgent?=?navigator.userAgent.toLocaleLowerCase(); if?(userAgent.match(/MicroMessager/i)?==?"micrcomeeager")?{ return?DEVICE_CONFIG.WEIXING; }?else?if?(userAgent.match(/chrome\/([\d.]+)/)?!=?null)?{ return?DEVICE_CONFIG.CHROME; }?else?if?(userAgent.match(/applewebkit\/([\d.]+)/)?!=?null)?{ return?DEVICE_CONFIG.IOS; } return?DEVICE_CONFIG.CHROME; }, /**獲得隨機顏色*/ getColor:?function()?{ var?random?=?function()?{ return?Math.floor(Math.random()?*?255); }; return?"rgb("?+?random()?+?","?+?random()?+?","?+?random()?+?")"; }, /**測試*/ testProgram:?function()?{ } }; /** ?*?獎品對象 ?*?*/ function?Gift(id,?name)?{ this.id?=?id; this.name?=?name; } Gift.prototype.getId?=?function()?{ return?this.id; }; Gift.prototype.getName?=?function()?{ return?this.name; }; Gift.prototype.toString?=?function()?{ return?"Gift:?"?+?"id="?+?this.index?+?",?name="?+?this.name; }; /** ?*?轉盤配置 ?*?*/ var?TURNTABLE_CONFIG?=?{ /*旋轉起來時默認開始旋轉的度數，度數愈大旋轉的初始速度愈大*/ BEGIN_ANGLE:?50, /*旋轉速度衰減系數，影響旋轉時間*/ RADIO:?0.95 }; /** ?*?設備類型配置表 ?*?*/ var?DEVICE_CONFIG?=?{ WEIXING:?"weixing", CHROME:?"chrome", PC:?"PC", ANDROID:?"android", IOS:?"iphone", WP:?"", MOBILE:?"" }; //var?GIFTS?=?{ //????ONE_REWARD?:?"一等獎", //????TWO_REWARD?:?"二等獎", //????THREE_REWARD?:?"三等獎", //????FOUR_REWARD?:?"四等獎", //????FIVE_REWARD?:?"五等獎", //????SIX_REWARD?:?"六等獎", //????SEVEN_REWARD?:?"七等獎", //????EIGHT_REWARD?:?"八等獎", //????NINE_REWARD?:?"九等獎", //????TEN_REWARD?:?"十等獎" //};<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<meta?http-equiv="content-type"?content="text/html;?charset=UTF-8"> ????<!--?兼容手機--> ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?minimum-scale=1.0,?maximum-scale=1.0"?/> ????<link?rel="stylesheet"?type="text/css"?href="css/default.css"> ????<script?type="text/javascript"?src="js/lottery.js"?charset="UTF-8"></script> ????<title>轉盤抽獎</title> </head> <body?onload="core.init()"> ????<div> ????????<canvas?id="canvas"?width="500px"?height="500px"></canvas> ????????<button?id="btn_lottery">抽獎</button> ????</div> </body> </html>