Javascript 如何画一个命运之轮？

我正在尝试使用本教程创建一个旋转轮子的游戏：

然而，本教程使用了一个轮子的图像，我想在html5/js中创建它。大概是这样的：

这就是我到目前为止所做的：

var ctx = canvas.getContext("2d");
var end = 0;
var color = ['#F0F8FF','#FAEBD7','#00FFFF','#7FFFD4','#00FF00','#FF8C00'];
var labels = ['label1', 'label2','label3','label4','label5','label6'];
var slices = 6

for (var i = 0; i < slices; i++) {
ctx.fillStyle = color[i];
ctx.beginPath();
ctx.moveTo(canvas.width/2,canvas.height/2);
ctx.arc(canvas.width/2,canvas.height/2,canvas.height/2,end, ((1/slices)*Math.PI*2)+end ,false);
ctx.lineTo(canvas.width/2,canvas.height/2);
ctx.fill();
end += ((1/slices)*Math.PI*2)+end;
}

var ctx=canvas.getContext（“2d”）；
var-end=0；
变量颜色=['#F0F8FF'、'#FAEBD7'、'#00FFFF'、'#7FFFD4'、'#00FF00'、'#FF8C00']；
变量标签=['label1'、'label2'、'label3'、'label4'、'label5'、'label6']；
变量切片=6
对于（变量i=0；i

我希望通过改变变量切片（在1-6之间）可以改变分段的数量。我还想在顶部显示标签。然后我想使用这个画布，而不是教程代码中的图像，这样轮子就会随着文本旋转。希望这不会让人困惑。任何人都知道如何做到这一点>我不介意使用任何库等。

使用JS Canvas的命运之轮

const扇区=[
{颜色：#f82”，标签：“堆栈”}，
{颜色：“0bf”，标签：“10”}，
{颜色：“fb0”，标签：“200”}，
{颜色：#0fb，标签：'50'}，
{颜色：#b0f，标签：'100'}，
{颜色：#f0b，标签：'5'}，
{颜色：“bf0”，标签：“500”}，
];
常量rand=（m，m）=>Math.random（）*（m-m）+m；
const tot=扇区长度；
const EL#u spin=document.querySelector（“#spin”）；
const ctx=document.querySelector（#wheel”）.getContext（'2d'）；
常数直径=ctx.canvas.width；
常数rad=直径/2；
常数PI=Math.PI；
常数TAU=2*PI；
常数弧=τ/扇区长度；
常数摩擦=0.991；//0.995=软，0.99=中，0.98=硬
设angVel=0；//角速度
设ang=0；//弧度角
const getIndex=（）=>数学层（tot-ang/TAU*tot）%tot；
职能部门（部门，i）{
常数ang=弧*i；
ctx.save（）；
//颜色
ctx.beginPath（）；
ctx.fillStyle=sector.color；
ctx.moveTo（rad，rad）；
ctx.arc（rad，rad，rad，ang，ang+arc）；
ctx.lineTo（rad，rad）；
ctx.fill（）；
//正文
翻译（rad，rad）；
ctx.旋转（ang+arc/2）；
ctx.textAlign=“右”；
ctx.fillStyle=“#fff”；
ctx.font=“bold 30px无衬线”；
ctx.fillText（扇区标签，rad-10，10）；
//
ctx.restore（）；
};
函数rotate（）{
常量扇区=扇区[getIndex（）]；
ctx.canvas.style.transform=`rotate（${ang-PI/2}rad）`；
EL_spin.textContent=！angVel？“spin”：sector.label；
EL_spin.style.background=sector.color；
}
函数框架（）{
如果（！angVel）返回；
angVel*=摩擦力；//通过摩擦力减小速度
如果（angVel<0.002）angVel=0；//停止
ang+=angVel；//更新角度
ang%=TAU；//规格化角度
旋转（）；
}
函数引擎（）{
框架（）；
requestAnimationFrame（引擎）
}
//初始化
部门。forEach（提取部门）；
旋转（）；//初始旋转
引擎（）；//起动发动机
EL_spin.addEventListener（“单击”，（）=>{
如果（！angVel）angVel=rand（0.25,0.35）；
});
#Wheeloff幸运{
显示：内联块；
位置：相对位置；
溢出：隐藏；
}
#车轮{
显示：块；
}
#旋转{
字体：1.5em/0无衬线；
用户选择：无；
光标：指针；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：绝对位置；
最高：50%；
左：50%；
宽度：30%；
身高：30%；
利润率：-15%；
背景：#fff；
颜色：#fff；
盒影：0 0 0 8px currentColor，0 0 px 15px 5px rgba（0,0,0,0.6）；
边界半径：50%；
过渡：0.8s；
}
#旋转：：之后{
内容：“；
位置：绝对位置；
顶部：-17px；
边框：10px实心透明；
边框底色：currentColor；
边界顶部：无；
}

快速旋转
仅仅是html5的普通
画布
就具备了绘制一个非常漂亮的“幸运轮”所需的一切，代码非常少，不需要库


您可以使用
arc
您可以使用
translate
/
rotate
全局变换绘制旋转文本
可以添加阴影和辉光效果
可以使用径向和线性渐变来模拟照明
可以使用多次渲染（例如，在已绘制的对象上渲染照明渐变）
现代浏览器上的速度非常好…足够快，可以实时渲染旋转的轮子（我希望绘制一个预先计算的旋转图像会更快，尤其是在移动设备上，但是这种方法需要在旋转的轮子顶部的另一个画布上有阴影）

例如，我总共得到了约100行html（3.5k未缩小）：


我是名为Winwheel.js的Javascript库的创建者，该库允许在HTML画布上轻松创建获奖/获奖控制盘

轮子可以是代码绘制的，也可以使用图形丰富的图像，它利用Greensock的动画平台实现旋转和其他动画效果

下面是一个使用Winwheel.js创建基本代码绘制控制盘的简单示例

var theWheel = new Winwheel({
  'numSegments'  : 8,
  'segments'     :
  [
    {'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
      {'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
      {'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
      {'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
      {'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
      {'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
      {'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
      {'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
  ],
  'animation' :
  {
    'type'     : 'spinToStop',
    'duration' : 5,
    'spins'    : 8
  }
});

Winwheel.js有一整套教程可以帮助您在我的网站上入门。如果您感兴趣，请访问
这里有一个解决方法（如果您觉得很难）：您尝试应用
标签了哪些内容
以及为什么它不起作用？（我似乎在您的代码中找不到任何地方可以绘制
标签[n]
）.我还没有用过标签，因为我不知道如何实现令人印象深刻的发光、阴影和发光效果--再加上放松！！嗨，我从几天开始一直在使用你的代码，试图找出如何用正确的角度来选择奖品的公式。速度控制会选择哪个奖品吗？@POGI:我重新阅读代码，然后确实是的，
速度
决定了针最终将位于哪个扇区。Thi