Javascript 完全停止后重新旋转车轮

在车轮停止后，我如何重新旋转下面的车轮。有那么一天我就是想不出来

我创建了一个resetWheel函数，它可以在车轮完全停止时重置车轮。我试着在车轮锁定和停止后插入它，但它拒绝与我一起工作。提前感谢您的反馈和帮助。请随意添加到我现有的代码中，因为我还是相当新的，任何建议都是好的

函数随机数（最小值、最大值）{
返回Math.random（）*（max-min）+min；
}
var color=['#6897bb'、'#6dc066'、'#f67f5c'、'#cc5466'、'#e6e6fa'、'#fbc'、'#f88'、'#fbc'、'#f67'；
变量标签=['5'，'3'，'2'，'1'，'15'，'6'，'10'，'0'，'20'，'0']；
var切片=color.length；
var sliceDeg=360/片；
var deg=兰特（0360）；
var速度=0；
var slowDownRand=0；
var ctx=canvas.getContext（'2d'）；
var width=canvas.width；//大小
变量中心=宽度/2；//居中
var=false；
var-lock=false；
var=false；
总得分=0；
功能deg2rad（度）{
返回度*数学PI/180；
}
功能drawSlice（度、颜色）{
ctx.beginPath（）；
ctx.fillStyle=颜色；
ctx.moveTo（中心，中心）；
ctx.弧（中心，中心，宽度/2，deg2rad（度），deg2rad（度+度））；
ctx.lineTo（中心，中心）；
ctx.fill（）；
}
函数drawText（度，文本）{
ctx.save（）；
翻译（中心，中心）；
ctx.旋转（deg2rad（deg））；
ctx.textAlign=“右”；
ctx.fillStyle=“#fff”；
ctx.font='bold 30px sans serif'；
ctx.fillText（文本，130,10）；
ctx.restore（）；
}
函数drawImg（）{
clearRect（0，0，宽度，宽度）；
对于（变量i=0；i0.2？速度*=慢降：0；
}
如果（锁定和速度）{
var ai=数学地板（（360度-90）%360）/sliceDeg）；//deg 2数组索引
ai=（切片+ai）%切片；//修复负索引
让分数=标签[ai]；
如果（！已记录）{
控制台日志（score）；
总分=总分+总分；
console.log（totalScore）
记录=真；
}
}
drawImg（）；
window.requestAnimationFrame（动画）；
});
document.getElementById（“stopSpin”）.addEventListener（“mousedown”，function（））{
isStopped=true；
//setTimeout（LoadPhase，2000）；//等待控制盘停止，然后启动函数
}，假）
#车轮{
显示：块；
文本对齐：居中；
溢出：隐藏；
}
#轮子：之后{
内容：“；
背景：红色；
边框：2倍纯白；
位置：绝对位置；
顶部：-7px；
左：50%；
宽度：10px；
高度：10px；
左边距：-7px；
变换：旋转（45度）
}



快速旋转
停止
猜对字母

有那么一天我就是想不出来

噢，这在个人层面上打击了我

无论如何，您没有将
isStopped
设置回false，这样您的轮子就不会旋转。您的
anim（）
函数在代码中的任何其他地方都不可访问，所以重置函数就看不到它

JS

函数随机数（最小值、最大值）{
返回Math.random（）*（max-min）+min；
}
var color=['#6897bb'、'#6dc066'、'#f67f5c'、'#cc5466'、'#e6e6fa'、'#fbc'、'#f88'、'#fbc'、'#f67'；
变量标签=['5'，'3'，'2'，'1'，'15'，'6'，'10'，'0'，'20'，'0']；
var切片=color.length；
var sliceDeg=360/片；
var deg=兰特（0360）；
var速度=0；
var slowDownRand=0；
var ctx=canvas.getContext（'2d'）；
var width=canvas.width；//大小
变量中心=宽度/2；//居中
var=false；
var-lock=false；
var=false；
总得分=0；
功能deg2rad（度）{
返回度*数学PI/180；
}
功能drawSlice（度、颜色）{
ctx.beginPath（）；
ctx.fillStyle=颜色；
ctx.moveTo（中心，中心）；
ctx.弧（中心，中心，宽度/2，deg2rad（度），deg2rad（度+度））；
ctx.lineTo（中心，中心）；
ctx.fill（）；
}
函数drawText（度，文本）{
ctx.save（）；
翻译（中心，中心）；
ctx.旋转（deg2rad（deg））；
ctx.textAlign=“右”；
ctx.fillStyle=“#fff”；
ctx.font='bold 30px sans serif'；
ctx.fillText（文本，130,10）；
ctx.restore（）；
}
函数drawImg（）{
clearRect（0，0，宽度，宽度）；
对于（变量i=0；i0.2？速度*=慢降：0；
}
如果（锁定和速度）{
var ai=数学地板（（360度-90）%360）/sliceDeg）；//deg 2数组索引
ai=（切片+ai）%切片；//修复负索引
让分数=标签[ai]；
如果（！已记录）{
控制台日志（score）；
总分=总分+总分；
console.log（totalScore）
记录=真；
}
}
drawImg（）；
window.requestAnimationFrame（动画）；
}
drawImg（）；
函数resetWheel（）{
如有（见附件）{
isStopped=false；
动漫（）；
}
}
startSpin.addEventListener（“单击”，动画）；
function rand(min, max) {
    return Math.random() * (max - min) + min;
}

var color = ['#6897bb', '#6dc066', '#f67f5c', '#cc5466', '#e6e6fa', '#fbc', '#f88', "#fbc", "#f67"];
var label = ['5', '3', '2', '1', '15', '6', '10', '0', "20", '0'];
var slices = color.length;
var sliceDeg = 360 / slices;
var deg = rand(0, 360);
var speed = 0;
var slowDownRand = 0;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width / 2; // center
var isStopped = false;
var lock = false;
var logged = false;
let totalScore = 0;

function deg2rad(deg) {
    return deg * Math.PI / 180;
}

function drawSlice(deg, color) {
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(center, center);
    ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
    ctx.lineTo(center, center);
    ctx.fill();
}

function drawText(deg, text) {
    ctx.save();
    ctx.translate(center, center);
    ctx.rotate(deg2rad(deg));
    ctx.textAlign = "right";
    ctx.fillStyle = "#fff";
    ctx.font = 'bold 30px sans-serif';
    ctx.fillText(text, 130, 10);
    ctx.restore();
}

function drawImg() {
    ctx.clearRect(0, 0, width, width);
    for (var i = 0; i < slices; i++) {
        drawSlice(deg, color[i]);
        drawText(deg + sliceDeg / 2, label[i]);
        deg += sliceDeg;
    }
}

function anim() {
    deg += speed;
    deg %= 360;

    // Increment speed
    if (!isStopped && speed < 3) {
        speed = speed + 1 * 0.1;
    }
    // Decrement Speed
    if (isStopped) {
        if (!lock) {
            lock = true;
            slowDownRand = rand(0.959, 0.998);
        }
        speed = speed > 0.2 ? speed *= slowDownRand : 0;
    }

    if (lock && !speed) {
        var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
        ai = (slices + ai) % slices; // Fix negative index
        let score = label[ai];
        if (!logged) {
            console.log(score);

            totalScore = totalScore + score;
            console.log(totalScore)
            logged = true;


        }

    }

    drawImg();

    window.requestAnimationFrame(anim);
}

drawImg();

function resetWheel() {
  if(isStopped){
    isStopped = false;
    anim();
  }
}

startSpin.addEventListener("click", anim);
document.getElementById("stopSpin").addEventListener("mousedown", function() {
    isStopped = true;
    //setTimeout(loadPhrase, 2000); //waits for wheel to stop, then starts function
}, false)

document.getElementById("restartSpin").addEventListener("click",resetWheel);

 <div id="gameScreen">
        <div id="wheel">
            <canvas id="canvas" width="300" height="300"></canvas>

        </div>

        <br>
        <button id="startSpin">Spin!</button>
        <button id="stopSpin">Stop!</button>
   <button id="restartSpin">Restart</button>
        <div id="gameWrapper">
            <h1 id="game_header">Guess The Correct Letters</h1>
            <div id="display">



            </div>

        </div>
    </div>