幸運大抽獎全新來襲，現在普遍的抽獎活動都是由flash開發的，然而，今天向大家展示由js實現的抽獎。早在2012年的時候寫過一篇文章關於js抽獎的《javascript 抽獎》 。
借助raphaeljs插件實現，官網：http://raphaeljs.com 中文文檔： http://lab.julying.com/raphael-js/docs/
幸運大抽獎已兩種方式展現，一種是圓盤旋轉（獵豹式），另一種是指針旋轉（考拉式），實現抽獎三部曲。
第一部：繪制圓盤和指針。
var r = Raphael("test",300,300); // 繪制圓盤 r.image("pan.jpg",0,0,300,300); // 繪制指針 r.image("pointer.png",145,0,10,150);
第二部：圓盤旋轉（獵豹式）。
btn.click(function(){ // 清空中獎結果 result.html(""); // 清空畫布 r.clear(); // 重新繪制圓盤和指針 pan = r.image(pic,0,0,300,300); r.image(pointer,145,0,10,150); // 選中角度 var angle = -parseInt(Math.random()*3000+6000); // 中獎結果 var tmp = Math.abs(parseInt(((angle-30)%360)/60))+1; pan.animate({transform: "r" + angle}, 1000, ">",function(){ result.html("恭喜您獲得"+tmp+"獎"); }); });
第三部：指針旋轉（考拉式）。
btn.click(function(){ // 清空中獎結果 result.html(""); // 設置暫停、計數、角度、中獎結果 var stop=null, index = 0, angle= parseInt(Math.random()*360), tmp =Math.abs(parseInt(((angle+30)%360)/60))+1; // 清空畫布，重新繪制圓盤和指針 r.clear(); r.image(pic,0,0,300,300); point = r.image(pointer,145,0,10,150); // 中獎結果 stop = setInterval(function(){ index++; if(index>=angle){ clearInterval(stop); result.html("恭喜您獲得"+tmp+"獎"); } point.rotate(1,150,150); },100); });
用到raphaeljs中五個方法有image、animate、transform、rotate、clear，搞定。
生活版：抽獎圓盤式先加速中急速后減速的效果。感興趣的朋友可以改進以上的代碼，用到實際項目中。
DEMO：