长知识！手把手写代码实现轮盘滚动抽奖！

?在当今数字化时代，抽奖活动已经成为各种营销活动、节日庆典甚至是私人派对的必备环节。而其中，轮盘滚动抽奖更是因其独特的趣味性和紧张感，备受大众喜爱。但是，如何将这个传统游戏与现代科技完美结合，让参与者感受到全新的体验呢？接下来，就让我们一起手把手地实现一个轮盘滚动抽奖程序！

效果展示

?一、准备工作

在开始编写代码之前，我们需要准备一些工具和环境。首先，你需要一个文本编辑器，如Notepad++或Visual Studio Code，用于编写代码，并安装一个浏览器用于启动浏览抽奖程序。设定轮盘抽奖的需求和界面布局。一般来说，轮盘抽奖的界面应包含轮盘、奖项、抽奖按钮等元素。在设计时，我们应注重界面的简洁明了，以便用户能快速理解活动规则并参与抽奖。

二、编程语言选择

对于轮盘滚动抽奖程序，我们可以选择多种编程语言来实现。在这里，我们以最传统的前端三剑客（HTML+ CSS+ JS）实现，介绍如何编写一个简单的轮盘滚动抽奖程序。

三 代码讲解

HTML：画布布局

<div class="prizeCircle">
 <canvas id="circle" width="300px" height="300px">抱歉！浏览器不支持。</canvas><!--画出图片，奖品轮盘-->
 <canvas id="circle01" width="200px" height="200px">抱歉！浏览器不支持。</canvas><!--箭头指针-->
 <canvas id="circle02" width="150px" height="150px">抱歉！浏览器不支持。</canvas><!--中间圆圈 白色圈-->
 <canvas id="circle03" width="200px" height="200px">抱歉！浏览器不支持。</canvas><!--中间小圆 红色圈、抽奖文字-->
 <button id="tupBtn" class="taoge_btn"></button><!--中间抽奖按钮覆盖-->
</div>

CSS：页面样式

*{padding: 0px;margin: 0px;font-size: 16px;}
.prizeCircle{width: 300px;height: 300px;margin: 100px auto;position: relative; }
.prizeCircle canvas{position: absolute;}
#circle{background-color: white;border-radius: 100%;}
#circle01,#circle03{left: 50px;top: 50px;z-index: 30;}
#circle02{left: 75px;top: 75px;z-index: 20;}
#circle{-o-transform: transform 6s;-ms-transform: transform 6s;-moz-transform: transform 6s;  
-webkit-transform: transform 6s;transition: transform 6s;-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;}
.taoge_btn{width: 60px;height: 60px;left: 120px;top: 120px;border-radius: 100%;
position: absolute;cursor: pointer;border: none;background: transparent;
outline: none;z-index: 40;}

JS：整体画布布局，抽奖动画

画布加载抽奖轮盘

function createImg(){
    const myImg = new Image()
	myImg.src = '抽奖底盘图片.png'
	myImg.onload = function () {
		ctx.drawImage( this, 0, 0, 300, 300 )
    }
}

画布绘制抽奖指针相关

function initPoint(){
   //箭头指针
   ctx1.beginPath();
   ctx1.moveTo(132,24);
   ctx1.lineTo(110,62);
   ctx1.lineTo(120,70);
   ctx1.lineTo(132,24);
   ctx1.fillStyle = "red";
   ctx1.fill();
   ctx1.closePath();
   //中间圆圈 白色圈
   ctx2.beginPath();
   ctx2.arc(75,75,55,0,Math.PI*2,false);
   ctx2.fillStyle = "#FAFAFA";
   ctx2.fill();
   ctx2.closePath();
   //中间小圆 红色圈
   ctx3.beginPath();
   ctx3.arc(100,100,40,0,Math.PI*2,false);
   ctx3.fillStyle = "red";
   ctx3.fill();
   ctx3.closePath();
   //小圆文字 开始抽奖
   ctx3.font = "Bold 20px Microsoft YaHei";
   ctx3.textAlign='start';
   ctx3.textBaseline='middle';
   ctx3.fillStyle = "#009688";
   ctx3.beginPath();
   ctx3.fillText('开始',80,90,40);
   ctx3.fillText('抽奖',80,110,40);
   ctx3.fill();
   ctx3.closePath();
  }

?抽奖随机控制与轮盘滚动效果

//转盘初始化
 var info = ["再接再厉","五等奖","再接再厉","四等奖","再接再厉","三等奖","二等奖","一等奖"]; 
//转盘旋转
 function runCup(){
  probability();
  var degValue = 'rotate('+angles+'deg'+')';
  $('#circle').css('-o-transform',degValue);   //Opera
  $('#circle').css('-ms-transform',degValue);   //IE浏览器
  $('#circle').css('-moz-transform',degValue);   //Firefox
  $('#circle').css('-webkit-transform',degValue);  //Chrome和Safari
  $('#circle').css('transform',degValue);
 }
 
 //各奖项对应的旋转角度
 function probability(){
  //获取随机数
  var num = parseInt(Math.random()*7);
  //旋转角度
  angles = 2160 * rotNum + 1800 + 45 * num;
  //顺时钟旋转，例如选择45度，则奖品是notice[7]
  notice = info[(8 - num) % 8];
 }

四、运行程序

在编写完代码后，你可以通过浏览器运行程序。在运行程序时，点击中间抽奖，程序会随机选择一个奖品并输出中奖信息。点赞收藏不迷路哦！