画布在特定地点的运气轮 [英] Canvas Wheel of fortune- stop at specific spot

问题描述

我已使用画布制作了一个运气轮，请按照以下教程： http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas

I have made a wheel of fortune using canvas by following this tutorial: http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas

区别是我的饼图的所有部分都有不同的大小。
使车轮旋转的方法与在链接中找到的方法相同。

The only difference is that my pieces of the "pie chart" are all of different sizes. The way to make the wheel spin is the same as the method found in the link.

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

So, my problem right now is I want to stop this wheel at a predetermined spot. what I have tried so far is changing the values of spinAngleStart and spinTotalTime to non-random numbers. However, I can't figure out the math required to make it stop at a predetermined piece of the pie. Any help would be appreciated.

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

EDIT:Here's a fiddle: fiddle

code

推荐答案

这里有一种方法：

• 定义一个包含您想要的起点&

• Define a wheel object containing your desired starting & ending angles and the total # of steps you want the wheel to take to get to the ending angle.

创建一个动画循环，绘制您的车轮，然后递增

Create an animation loop that draws your wheel and then increments the wheel object's stepcount.

绘制根据当前步数旋转的滚轮。您可以这样计算旋转角度：（endAngle-startAngle）/ stepcount * currentStep

Draw the wheel rotated according to the current stepcount. You can calculate the rotation angle like this: (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>

这篇关于画布在特定地点的运气轮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！