Question

我按照本教程使用画布创造了一笔财富：http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas

唯一的区别是我的饼图＆＃34;饼图＆＃34;各种尺寸都有。制作车轮旋转的方法与链接中的方法相同。

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

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

code

Answer 1

以下是一种方法：

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

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

＆＃13;

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);    
}

＆＃13;

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

＆＃13;

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

＆＃13;

帆布轮的运势 - 停在特定的地方

1 个答案: