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之间）来更改段数。我还想在顶部显示标签。然后我想使用这个画布而不是该教程代码中的图像，以便轮子旋转文本。希望这不会令人困惑。任何人都知道如何做到这一点＆gt;我不介意使用任何图书馆等。

Answer 1

<强> jsBin demo with rotation

var color    = ['#ca7','#7ac','#77c','#aac','#a7c','#ac7', "#caa"];
var label    = ['10', '200','50','100','5','500',"0"];
var slices   = color.length;
var sliceDeg = 360/slices;
var deg      = 0;
var ctx    = canvas.getContext('2d');
var width  = canvas.width; // size
var center = width/2;      // center
function deg2rad(deg){ return deg * Math.PI/180; }

function drawSlice(deg, color){
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.moveTo(center, center);
  ctx.arc(center, center, width/2, deg2rad(deg), deg2rad(deg+sliceDeg));
  ctx.lineTo(center, center);
  ctx.fill();
}

function drawText(deg, text) {
  ctx.save();
  ctx.translate(center, center);
  ctx.rotate(deg2rad(deg));
  ctx.textAlign = "right";
  ctx.fillStyle = "#fff";
  ctx.font = 'bold 30px sans-serif';
  ctx.fillText(text, 130, 10);
  ctx.restore();
}

for(var i=0; i<slices; i++){
  drawSlice(deg, color[i]);
  drawText(deg+sliceDeg/2, label[i]);
  deg += sliceDeg;
}

<canvas id="canvas" width="300" height="300"></canvas>

Answer 2

只需要html5的简单canvas就可以用很少的代码绘制一个非常好看的“命运之轮”，而不需要库。

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

例如，这就是我用~100 html行（3.5k NOT 缩小）的总和：

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/

如何画出一笔财富？

3 个答案: