命运之轮怎么画？

Question

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

http://www.emanueleferonato.com/2015/07/31/create-a-wheel-of-fortune-for-your-html5-games-with-phaser-in-only-a-few-lines/

但是，本教程使用图像作为轮子，我想在 html5/js 中创建它。有点像这样：

https://www.winkbingo.com/images/lp/301114/spin_the_wheel_image.png 这是我目前所拥有的：

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;
}

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

Answer 1

使用 JS Canvas 的幸运之轮

const sectors = [
  {color:"#f82", label:"Stack"},
  {color:"#0bf", label:"10"},
  {color:"#fb0", label:"200"},
  {color:"#0fb", label:"50"},
  {color:"#b0f", label:"100"},
  {color:"#f0b", label:"5"},
  {color:"#bf0", label:"500"},
];

const rand = (m, M) => Math.random() * (M - m) + m;
const tot = sectors.length;
const EL_spin = document.querySelector("#spin");
const ctx = document.querySelector("#wheel").getContext('2d');
const dia = ctx.canvas.width;
const rad = dia / 2;
const PI = Math.PI;
const TAU = 2 * PI;
const arc = TAU / sectors.length;

const friction = 0.991; // 0.995=soft, 0.99=mid, 0.98=hard
let angVel = 0; // Angular velocity
let ang = 0; // Angle in radians

const getIndex = () => Math.floor(tot - ang / TAU * tot) % tot;

function drawSector(sector, i) {
  const ang = arc * i;
  ctx.save();
  // COLOR
  ctx.beginPath();
  ctx.fillStyle = sector.color;
  ctx.moveTo(rad, rad);
  ctx.arc(rad, rad, rad, ang, ang + arc);
  ctx.lineTo(rad, rad);
  ctx.fill();
  // TEXT
  ctx.translate(rad, rad);
  ctx.rotate(ang + arc / 2);
  ctx.textAlign = "right";
  ctx.fillStyle = "#fff";
  ctx.font = "bold 30px sans-serif";
  ctx.fillText(sector.label, rad - 10, 10);
  //
  ctx.restore();
};

function rotate() {
  const sector = sectors[getIndex()];
  ctx.canvas.style.transform = `rotate(${ang - PI / 2}rad)`;
  EL_spin.textContent = !angVel ? "SPIN" : sector.label;
  EL_spin.style.background = sector.color;
}

function frame() {
  if (!angVel) return;
  angVel *= friction; // Decrement velocity by friction
  if (angVel < 0.002) angVel = 0; // Bring to stop
  ang += angVel; // Update angle
  ang %= TAU; // Normalize angle
  rotate();
}

function engine() {
  frame();
  requestAnimationFrame(engine)
}

// INIT
sectors.forEach(drawSector);
rotate(); // Initial rotation
engine(); // Start engine
EL_spin.addEventListener("click", () => {
  if (!angVel) angVel = rand(0.25, 0.35);
});

#wheelOfFortune {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

#wheel {
  display: block;
}

#spin {
  font: 1.5em/0 sans-serif;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  margin: -15%;
  background: #fff;
  color: #fff;
  box-shadow: 0 0 0 8px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  transition: 0.8s;
}

#spin::after {
  content: "";
  position: absolute;
  top: -17px;
  border: 10px solid transparent;
  border-bottom-color: currentColor;
  border-top: none;
}

<div id="wheelOfFortune">
  <canvas id="wheel" width="300" height="300"></canvas>
  <div id="spin">SPIN</div>
</div>

Answer 2

html5 的简单 canvas 具有绘制非常漂亮的“命运之轮”所需的一切，代码很少，不需要库。

• 您可以使用arc 绘制饼图切片
• 您可以使用translate/rotate 全局变换来绘制旋转文本
• 您可以添加阴影和发光效果
• 您可以使用径向和线性渐变来模拟照明
• 您可以使用多通道渲染（例如，在已绘制的内容上渲染照明渐变
• 现代浏览器的速度相当不错...足够快以实时渲染旋转的轮子（我希望绘制单个预先计算的旋转图像会更快，尤其是在移动设备上，但是这种方法需要在旋转轮顶部的另一幅画布中具有阴影）。

例如，这就是我得到的大约 100 行 html 行（3.5k 未缩小）：

http://raksy.dyndns.org/wheel.html 上的实时示例

Answer 3

我是一个名为 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 教程可帮助您开始使用我的网站。有兴趣请访问http://dougtesting.net/