jquery - Canvas 命运之轮-停在特定地点

通过遵循本教程，我已经使用画布发了大财：http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas

唯一的区别是我的“饼图”的大小都不同。
使车轮旋转的方法与链接中找到的方法相同。

所以，我现在的问题是我想将车轮停在预定的位置。到目前为止，我尝试将spinAngleStart和spinTotalTime的值更改为非随机数。但是，我无法弄清楚使它停止在预定饼图上所需的数学运算。任何帮助，将不胜感激。

编辑：这是一个小提琴：fiddle

code

最佳答案

这是一种实现方法：


定义一个车轮对象，其中包含所需的起始角度和终止角度以及希望车轮达到终止角度所需的总步数。
创建一个动画循环，绘制您的车轮，然后增加车轮对象的步数。
绘制根据当前步数旋转的轮子。您可以像这样计算旋转角度：(endAngle-startAngle)/stepcount * currentStep


示例代码和演示（奖励，请使用easing！）：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var PI=Math.PI;
var PI2=PI*2;

var wheel={
  cx:cw/2,
  cy:ch/2,
  radius:Math.min(cw,ch)/2-20,
  startAngle:PI,
  endAngle:PI2*2,
  totalSteps:360,
  currentStep:0,
}

requestAnimationFrame(animate);

function draw(w){
  var angle=easing(w);
  ctx.translate(w.cx,w.cy);
  ctx.rotate(angle);
  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  ctx.arc(0,0,w.radius,0,PI2);
  ctx.fillStyle='skyblue';
  ctx.strokeStyle='lightgray';
  ctx.lineWidth=3;
  ctx.fill();
  ctx.stroke();
  ctx.fillStyle='red';
  ctx.font='18px verdana';
  ctx.textBaseline='middle';
  ctx.fillText('You Win!',40,0);
  ctx.setTransform(1,0,0,1,0,0);
  ctx.beginPath();
  ctx.moveTo(cw/2,ch/2);
  ctx.lineTo(cw/2+30,ch/2);
  ctx.strokeStyle='green';
  ctx.stroke();
}

function animate(time){
  if(wheel.currentStep>wheel.totalSteps){return;}
  draw(wheel);
  wheel.currentStep++;
  requestAnimationFrame(animate);
}

function easing(w){
  var t=w.currentStep;
  var b=0;
  var d=w.totalSteps;
  var c=w.endAngle-w.startAngle;
  // Penner's OutQuart
  return (-c*((t=t/d-1)*t*t*t-1)+b+w.startAngle);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

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