我需要减慢 Javascript 中的轮盘赌旋转

Question

我有一个作业，我必须在没有插件的情况下用 javascript 制作轮盘赌旋转轮代码，并且在此代码之前我需要一些条件 clearTimeout(spinTimeout);
但我不知道如何为轮盘赌旋转的减速速度编写代码。 最后一个问题，我需要用颜色数组在轮盘赌中随机颜色

这是我的代码：

<h1>
<p></p>
<p>
	
  <input type="button" value="spin" onmousedown="spin();" onmouseup="stopRotateWheel();" style="float: left;" />

  <canvas id="wheelcanvas" width="500" height="500"></canvas>
  <script type="application/javascript">
 
  var prize = ["prize1", "prize2", "prize3", "prize4",
                     "prize5", "prize6", "prize7", "prize8",
                     "prize9", "prize10", "Article11", "Article12"];
  
  var startAngle = 0;
  var arc = Math.PI / 6;
  var spinTimeout =null;
  
  var spinArcStart = 10;
  var spinTime = 0;
  
  var ctx;
  var x = 100;
  var i = 30;

  spinpower=false;
  function Random_Color()
	{
		var colors = ["#C137BD", "#D74C76", "#BD3B47", "#DC4345", "#F69939",
		"#FCC334", "#D3DC5D", "#5DDF67", "#3ABF32", "#3DA053",
		"#3DA0A0", "#5A7CC3", "#5792EE", "#6E4ECE", "#B53CB1"
	];
	
		var random_color = colors[Math.floor(Math.random() * colors.length)];
		return random_color;
	}
  function draw() {
    drawRouletteWheel();
  }
  
  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = 200;
      var textRadius = 160;
      var insideRadius = 125;
      
      ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,500,500);
      
      
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
      
      ctx.font = 'bold 15px sans-serif';
      
      for(var i = 0; i < 12; i++) {
        var angle = startAngle + i * arc;
        ctx.fillStyle = Random_Color();
        
        ctx.beginPath();
        ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
        ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();
        
        ctx.save();
        ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur    = 0;
        ctx.shadowColor   = "rgb(220,220,220)";
        ctx.fillStyle = "black";
        ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
        ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = prize[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore();
      } 
      
      //Arrow
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
      ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.fill();
    }
  }
  
  function spin() {
    spinAngleStart = Math.random() * 10 + 10;
    spinTime = 0;
    spinTimeTotal = Math.random() * 3 + 4 * 1000;
    rotateWheel();
  }
 
  function rotateWheel() {
	var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
      startAngle += (spinAngle * Math.PI / 180);
    drawRouletteWheel()
    
	x--;
	spinTimeout = setTimeout('rotateWheel()',x);
    if (x<=-10){
     document.getElementById('welcomeDiv').style.display = "block";
   }
   
  }
 

  function stopRotateWheel() {
	x=100;
	document.getElementById('welcomeDiv').style.display = "none";
	clearTimeout(spinTimeout);	
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    ctx.save();
    ctx.font = 'bold 12px sans-serif';
    var text = prize[index]
    ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
	window.location = "navto://"+prize[index]+"_stack";
	
    ctx.restore();
  }
  
  function easeOut(t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
  }
  
  draw();
</script>
</p>
<p>&nbsp;</p>
  <div id="welcomeDiv"  style="font-size:20;display:none;"  > MAX SPIN</div>

Answer 1

听起来您在 Google 上搜索了一个缓动功能，但不知道如何使用它。

Robert Penner 的一组不错的缓动函数可以在这里找到：

https://github.com/danro/jquery-easing/blob/master/jquery.easing.js

这是使用 Penner 缓动函数的快速课程

这些是 Penner 缓动函数的参数：

// d: total duration (==# steps desired to complete the animation)
// t: current step# inside duration, 
// b: beginning value,
// c: total change from beginning value,

您可以像这样设置参数：

// b == the beginning value
// start your wheel at 0 angle
var b=0; 

// c == the total change that will occur to the beginning value
// spin the wheel one full rotation (PI*2) plus a random final angle (Math.random()*PI*2)
var PI2=Math.PI*2;
var c=PI2+Math.random()*PI2;

// d == duration == the number of loops desired to complete the animaton
// have the spin take 120 animation loops to complete
// If each animation loop is 1/60th second then the full animation takes 2 seconds
var d=120;

// t == the current step of the animation
var t=0; // start at step#0
// each loop will advance "t" towards "d"
t++;  // make t advance towards d 

制作动画：

1. 创建一个动画循环（最好是requestAnimationFrame，但如果必须要setTimeout）。
2. 计算当前值：var currentAngle=someEasing(t,b,c,d)
3. 画出在currentAngle处旋转的轮子
4. 增加下一次循环的步数：t++

由于您处于学习模式...

...我把实际的编码留给你。