我有这个http://jsfiddle.net/e7fwt4wb/！ roullete在html5 canvas中正常旋转，当我调用spin方法时，roullete旋转并停止在随机的数字数组中！如何调用传递参数的函数以停在我的数字数组的位置？
<script type="text/javascript">
var colors = ["#336600", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000", "#000000", "#660000", "#000000"];
var numbers = ["0", "1", "8", "2",
"9", "3", "10", "4",
"11", "5", "12", "6", "13", "7", "14"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
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 18px Helvetica, Arial';
for (var i = 0; i < 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
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 = "white";
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 = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "yellow";
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 * 1500;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if (spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
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 30px Helvetica, Arial';
ctx.textAlign = "center";
var text = numbers[index]
ctx.fillStyle = colors[index];
ctx.fillText("Rolled: " + text, 250 - ctx.measureText(text).width / 2, 250 + 10);
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);
}
drawRouletteWheel();
</script>
最佳答案
这是旋转车轮并停在所需位置的方法。
要使用Penner的缓动方程式旋转车轮，您需要定义以下4个属性：
动画的当前经过时间
车轮的起始角度
将车轮旋转到所需数量所需的总角度变化
动画的总时长
给定这四个属性，您可以在动画期间的任何时间应用缓动方程之一来计算车轮角度：
// t: current time inside duration,
// b: beginning value,
// c: total change from beginning value,
// d: total duration
function easeOutQuart(t, b, c, d){
// return the current eased value based on the current time
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
例如，假设您要在2秒钟的时间内旋转到9号口袋。然后，这些属性值将适用：
当前经过时间：例如，
800ms，车轮的起始角度：
0 radians，旋转到9号所需的角度的总变化：
3.6652 radians总持续时间：
2000ms，您可以像这样计算800ms时车轮旋转的缓和角：
easeOutQuart(800,0,3.6652,2000);
Penner的三个必需属性是“给定”，但旋转到数字9所需的总变化是这样计算的：
// "9" is element#4 in numbers[]
var indexOfNumber9 = 4;
// calc what angle each number occupies in the circle
var angleSweepPerNumber = (Math.PI*2) / totalCountOfNumbersOnWheel;
// calc the change in angle required to rotate the wheel to number-9
var endingAngleAt9 = (Math.PI*2) - angleSweepPerNumber * (indexOfNumber9+1);
// the arrow is at the top of the wheel so rotate another -PI/2 (== -90 degrees)
endingAngleAt9 -= Math.PI/2;
// endingAngle is now at the leading edge of the wedge
// so rotate a bit further so the array is clearly inside wedge#9
endingAngleAt9 += Math.random()*angleSweepPerNumber;
这是示例代码和演示：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var colors = ["#336600", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000", "#000000", "#660000", "#000000"];
var numbers = ["0", "1", "8", "2",
"9", "3", "10", "4",
"11", "5", "12", "6", "13", "7", "14"];
var pocketCount=12;
var cheatText=numbers[4];
$('#cheat').text('Stop on '+cheatText);
var cw=canvas.width=ch=canvas.height=500;
var cx=cw/2;
var cy=ch/2;
// wheel & arrow are used often so cache them
var wheelCanvas=drawRouletteWheel();
var arrow=drawArrow();
var wheel={
cx:cw/2,
cy:ch/2,
radius:Math.min(cw,ch)/2-20,
startAngle:0,
endAngle:Math.PI*4+cheatingSpin(cheatText),
totalSteps:360,
currentStep:0,
}
drawAll(wheel);
$('#spin').click(function(){requestAnimationFrame(animate);$(this).hide()});
// funcs
function cheatingSpin(hit){
var PI=Math.PI;
var PI2=PI*2;
var index=numbers.indexOf(cheatText);
var pocketSweep=PI2/pocketCount;
// cheatText not in numbers[]? -- then spin randomly
if(index<0){return(PI2*2+Math.random()*PI2);}
// if cheating, calc random endAngle inside desired number's pocket
return((PI2-pocketSweep*(index+1))+Math.random()*pocketSweep-PI/2);
}
function animate(time){
if(wheel.currentStep>wheel.totalSteps){return;}
drawAll(wheel);
wheel.currentStep++;
requestAnimationFrame(animate);
}
function easing(w){
var t=w.currentStep;
var b=w.startAngle;
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);
}
function drawAll(w){
var angle=easing(w);
ctx.clearRect(0,0,cw,ch);
ctx.translate(cx,cy);
ctx.rotate(angle);
ctx.drawImage(wheelCanvas,-wheelCanvas.width/2,-wheelCanvas.height/2);
ctx.rotate(-angle);
ctx.translate(-cx,-cy);
ctx.drawImage(arrow,cx-arrow.width/2,44);
}
function drawRouletteWheel() {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width=canvas.height=outsideRadius*2+6;
var x=outsideRadius+3;
var y=outsideRadius+3;
var arc = Math.PI / (pocketCount/2);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 18px Helvetica, Arial';
// wheel
for (var i = 0; i < pocketCount; i++) {
var angle = i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(x,y, outsideRadius, angle, angle + arc, false);
ctx.arc(x,y, 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 = "white";
ctx.translate(x+Math.cos(angle + arc / 2) * textRadius,
y+Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//
return(canvas);
}
function drawArrow(){
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width=18;
canvas.height=18;
//Arrow
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.moveTo(5,0);
ctx.lineTo(13,0);
ctx.lineTo(13,10);
ctx.lineTo(18,10);
ctx.lineTo(9,18);
ctx.lineTo(0,10);
ctx.lineTo(5,10);
ctx.lineTo(5,0);
ctx.fill();
return(canvas);
}body{ background-color: ivory; }
#canvas{border:1px solid red; background:lightgray; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id=cheat>Stop on this number</span>
<button id=spin>Spin</button><br>
<canvas id="canvas" width=300 height=300></canvas>