Canvas 命运之轮-停在指定地点

Question

我按照本教程使用 canvas 制作了一个幸运轮：http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas

唯一的区别是我的 "pie chart" 件的尺寸都不一样。使轮子旋转的方法与link.

中找到的方法相同

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

编辑：这是一个fiddle：fiddle

code

Answer 1

这是一种方法：

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

示例代码和演示（奖金，使用缓动！）：

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>

Canvas 命运之轮-停在指定地点

Canvas Wheel of fortune- stop at specific spot

jquery

canvas