我需要放緩在JavaScript中的輪盤旋轉

Question

我有一個作業，我必須在沒有插件的情況下在javascript中製作輪盤旋轉輪代碼，並且在此代碼之前我需要一些條件 clearTimeout（spinTimeout）;
但我不知道如何編碼輪盤旋轉的減速速度。 和最後一個問題，我需要隨機的顏色在輪盤賭色

這裏的陣列是我的代碼：

<h1> 
 
<p></p> 
 
<p> 
 
\t 
 
    <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() 
 
\t { 
 
\t \t var colors = ["#C137BD", "#D74C76", "#BD3B47", "#DC4345", "#F69939", 
 
\t \t "#FCC334", "#D3DC5D", "#5DDF67", "#3ABF32", "#3DA053", 
 
\t \t "#3DA0A0", "#5A7CC3", "#5792EE", "#6E4ECE", "#B53CB1" 
 
\t ]; 
 
\t 
 
\t \t var random_color = colors[Math.floor(Math.random() * colors.length)]; 
 
\t \t return random_color; 
 
\t } 
 
    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() { 
 
\t var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal); 
 
     startAngle += (spinAngle * Math.PI/180); 
 
    drawRouletteWheel() 
 
    
 
\t x--; 
 
\t spinTimeout = setTimeout('rotateWheel()',x); 
 
    if (x<=-10){ 
 
    document.getElementById('welcomeDiv').style.display = "block"; 
 
    } 
 
    
 
    } 
 
    
 

 
    function stopRotateWheel() { 
 
\t x=100; 
 
\t document.getElementById('welcomeDiv').style.display = "none"; 
 
\t clearTimeout(spinTimeout); \t 
 
    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); 
 
\t window.location = "navto://"+prize[index]+"_stack"; 
 
\t 
 
    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

聽起來就像你用谷歌搜索了寬鬆的功能和唐不知道如何使用它。

一組漂亮的羅伯特·彭納緩和功能的可以在這裏找到：

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

下面是使用彭納緩和功能

這些快速的教訓是參數潘納寬鬆功能：

// 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. 創建一個動畫循環（最好​​，但setTimeout如果你必須）。
2. 計算的當前值：var currentAngle=someEasing(t,b,c,d)
3. 繪製在​​
4. 遞增通過循環旋轉下一次的步數輪：t++

既然你在學習模式是..

...我把實際的編碼留給你。