Javascript 代码中的画布仅在for循环之后显示。我想要一个动画效果_Javascript_Html_Canvas

Javascript 代码中的画布仅在for循环之后显示。我想要一个动画效果

javascript html canvas

Javascript 代码中的画布仅在for循环之后显示。我想要一个动画效果,javascript,html,canvas,Javascript,Html,Canvas,我正在学习javascript OOP，并决定实现Langston的ant。不过，我在html5画布上遇到了麻烦。当我运行此程序时，Ant.js中的调试警报会按预期弹出，但只有在它们全部完成后，画布才会显示在我的浏览器（chrome）中。然后它看起来像是应该在循环末尾的状态。为什么会这样？提前谢谢这是我的密码 langstonsAnt.html <!DOCTYPE html> <html lang="en"> <head> <meta charse

我正在学习javascript OOP，并决定实现Langston的ant。不过，我在html5画布上遇到了麻烦。当我运行此程序时，Ant.js中的调试警报会按预期弹出，但只有在它们全部完成后，画布才会显示在我的浏览器（chrome）中。然后它看起来像是应该在循环末尾的状态。为什么会这样？提前谢谢

这是我的密码

langstonsAnt.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Langstons Ant</title>
<script defer src="antGame.js"></script>
<script src="Ant.js"></script>
<script src="AntWorld.js"></script>
</head>
<body>
<canvas id="antboard" width="700" height="700" style="border: 5px solid black; background-size: 100%;">
    Canvas not supported
</canvas>
</body>

</html>

AntWorld.js

class AntWorld
{
    constructor(size)
    {
        this.board = Array(size).fill(0).map(()=>Array(size).fill(0));
    }

    setAntPos(antX, antY)
    {
        this.board[antY][antX] = 1;
        ctx.fillStyle = "black";
        ctx.fillRect(7 * antX, 7 * antY, 7, 7);
    }
}

您所做的（在删除警报并取消注释

sleep（）

）是一项重要的工作。这意味着在您的睡眠例程中，Javascript一直处于忙碌状态。没有时间做其他事情，比如渲染画布，因为它正在循环

您需要使用系统事件来执行下一个操作。通常情况下，用户或计时器会按键

那么，让我们使用计时器重新编码这段代码：

for (let i=0; i<16; i++)
{
    ant.moveForward();
    world.setAntPos(ant.getAntX(),ant.getAntY());
    sleep(100);
}

你可以在这里看到它的作用：

有关Javascript计时器的更多信息，请参阅：

有关一般事件的信息，请参阅：

这两个链接都只是示例，可能会有更好的教程。

在删除警报并取消注释

sleep（）

之后，您所做的是一个简单的示例。这意味着在您的睡眠例程中，Javascript一直处于忙碌状态。没有时间做其他事情，比如渲染画布，因为它正在循环

您需要使用系统事件来执行下一个操作。通常情况下，用户或计时器会按键

那么，让我们使用计时器重新编码这段代码：

for (let i=0; i<16; i++)
{
    ant.moveForward();
    world.setAntPos(ant.getAntX(),ant.getAntY());
    sleep(100);
}

你可以在这里看到它的作用：

有关Javascript计时器的更多信息，请参阅：

有关一般事件的信息，请参阅：

这两个链接都只是示例，可能会有更好的教程。

如果您想在浏览器中使用JavaScript制作动画，您应该真正使用并适当地构造代码

也就是说，如果您只是想破解，可以在循环中使用async/await。首先，我们需要一个等待一段时间的函数

function sleep(ms = 0) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

然后我们需要将循环放入

async

函数中，并使用

wait

关键字调用

sleep

async function loop() {
  for (let i=0; i<16; i++)
  {
      ant.moveForward();
      world.setAntPos(ant.getAntX(),ant.getAntY());
      await sleep(100);  // pause 100 milliseconds
  }
}
loop();

异步函数循环（）{
对于（让i=0；i如果您想在浏览器中用JavaScript制作动画，您应该真正使用并适当地构造代码
也就是说，如果您只是想破解，可以在循环中使用async/wait
function sleep(ms = 0) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

然后我们需要将循环放入async
函数中，并使用wait
关键字调用sleep

async function loop() {
  for (let i=0; i<16; i++)
  {
      ant.moveForward();
      world.setAntPos(ant.getAntX(),ant.getAntY());
      await sleep(100);  // pause 100 milliseconds
  }
}
loop();

异步函数循环（）{
对于（设i=0；我将clearTimeout（）
清除setInterval（）
handle？@canon是的，但我会更正它。请参阅：“值得注意的是，setTimeout（）和setInterval（）使用的ID池是共享的，这意味着您可以从技术上使用clearTimeout（）和clearTimeout（）可互换。但是，为了清楚起见，你应该避免这样做。“谢谢。它现在正在工作。这是完美的。这是我需要学习的系统事件。将clearTimeout（）
清除setInterval（）
handle吗？@canon是的，但我会纠正它。请参阅：“值得注意的是，setTimeout（）使用的ID池和setInterval（）是共享的，这意味着您可以在技术上互换使用clearTimeout（）和clearInterval（）。但是，为了清楚起见，您应该避免这样做。”谢谢。它现在正在工作。这是完美的。这是我需要学习的系统事件。谢谢。如果我的需求更广泛，我一定会使用这种方法。我确实需要为未来的项目学习正确的动画过程。谢谢。如果我的需求更广泛，我一定会使用这种方法。我确实需要学习有关co的知识纠正未来项目的动画流程。