如何画出一笔财富？

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

带旋转的jsBin演示

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

只需要简单canvas的html5就可以用很少的代码绘制一个非常好看的"财富之轮",而不需要库.

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

例如,这是我跟〜100条HTML线(3.5K得到不精缩)总数:

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