如何在Javascript中强制画布刷新

在函数板后面的代码中，重新绘制画布。但是，在控件恢复给用户之前，不会重新绘制画布。每当调用函数时，强制刷新需要什么代码序列

function doRound (ctx, game, loc, move){ // move is selected human move
    let go = move;
    let translate = {0:-1,1:-8,2:1,3:8}
    for (var i = 0; i < 2; i++) {
        loc = loc+translate[go]; // calculate move
        if (illegal(loc)){
            let text = (i === 0) ? "You lose!" : "You win!";
            document.getElementById("result").innerHTML = text;
            break;  // game over
        }       
        game[loc] = true; // place move on board
        board(ctx);  // refresh canvas
        if (i === 0){go = compMove()};  // calc computer move
    }
}

函数doRound（ctx、游戏、loc、移动）{//move是选定的人类移动
放手=移动；
让translate={0:-1,1:-8,2:1,3:8}
对于（变量i=0；i<2；i++）{
loc=loc+translate[go]；//计算移动
如果（非法（loc））{
让text=（i==0）？“你输了！”：“你赢了！”；
document.getElementById（“结果”）.innerHTML=text；
中断；//游戏结束
}       
game[loc]=true；//将移动放置在板上
线路板（ctx）；//刷新画布
如果（i==0）{go=compMove（）}；//计算计算机移动
}
}

在重新绘制画布之前，您需要先擦除画布上的内容

您可以使用clearRect（）并将画布的大小传递给它：

ctx.clearRect(0, 0, canvas.width, canvas.height);

下面是一个基本示例，说明这是如何有用的

//注意，在javascript中，如果一个html元素有一个id，那么存在一个同名的变量，您可以使用ommit通过document.getElementById（“mycan”）获取它；
设ctx=mycan.getContext（“2d”）；
//x中的初始矩形位置
让我们移动=20；
//无缘无故地做一些繁重的处理
常量重处理=（arr）=>{
for（设i=0；i{
//如果（e.key==“ArrowRight”{move++}用户按下键盘上的右箭头，则增加红方块的x位置
移动+=（e.key==“向右箭头”）；
});
//在动画开始之前调用heavyProcessing
设ar=[]；
重加工（ar）；
//简单动画定时器
设置间隔（（）=>{
//每次重画前都要擦掉画布
ctx.clearRect（0,0，mycan.width，mycan.height）；
//在绘制前选择下一个矩形颜色
ctx.fillStyle=“红色”；
//画矩形
ctx.fillRect（移动，20,50,50）；
//以每秒60次的速率在每帧上调用代码
}，1000/60）

这很有用，但如果有一些繁重的处理在进行呢？GivenJS是单线程的，如何强制中断以所需的间隔刷新屏幕？繁重的处理意味着您将获得一些值，这些值允许您存储这些值，这里我所做的只是重新绘制一些内容。例如，如果您有一个sorting算法对一个包含一百万个项目的数组进行排序。你可以将这个排序后的数组存储在某个地方，而不是每次都调用排序函数。Javascript不是单线程的，请看一看：我很难知道在哪里添加setInterval（）。应该是在我提供的代码序列中，在用户输入移动的调用代码中，还是在compMove（）函数中。compMove（）通常需要2或3秒钟才能完成计算机移动，在此期间，用户的移动不会显示，即使board（）显式刷新画布（虽然在计算机移动和控件返回给用户进行下一步移动之前不会发生任何事情）…不必在每帧调用doRound，您可以使用单击（或按键）eventListener来检测是否进行了单击。但是如果此代码需要3秒钟，您可能会遇到其他一些性能问题，请查看是否在setInterval中没有加载任何图像，是否没有console.log for循环（超过100项），如果您没有在控制台中记录大对象。如果您对大数组进行排序等，我没有更新他编写代码来显示eventListener Use的一个示例，谢谢你花了这么多时间。我想我明白了。繁重处理的原因是计算机试图探索不同的选项。三个移动可能有3**64个移动，所有这些都是为了找出三个移动中的哪一个是最好的！我想尝试并尽可能地推动指数来计算看看这是否会有很大的不同。这场比赛正在进行中