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

Question

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

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

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

编辑:这是一个 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>