Javascript 画动画线条

我正在尝试用javascript和canvas制作HTML5中的海龟标志（我想和我的学生一起学习简单的算法，我想制作简单的说明）

我成功地制作了基本指令，但这些行同时出现，我希望看到它们一个接一个地出现

这是我的密码：

var dessin=document.getElementById（“dessin”）
var ctx=dessin.getContext（“2d”）；
变量角度=0；//德格拉斯角
//关于多恩·勒斯库多内斯·德佩特
var x=最小宽度/2；
变量y=最小高度/2；
功能前进（距离）{
var-iter=1；
变量角度=角度%360；
varθ=角度/180*Math.PI；
var vitesse=10；
var compteur=1；
var timer=setInterval（函数（）{
ctx.beginPath（）；
ctx.moveTo（x，y）；
x=数学cos（θ）*距离/维特斯+x；
y=数学sin（θ）*距离/vitesse+y；
ctx.lineTo（x，y）；
ctx.stroke（）；
计算机++；
如果（computer>vitesse）{
清除间隔（计时器）；
}
}，1000/维特斯）；
//设置超时（清除间隔（计时器），2000）；
}
功能左转（角度旋转）{
角度=（角度-角度旋转）%360；
}
//射击命令
左转（45）；
远期（100）；
左转（45）；
远期（100）
您的问题是您的代码是异步的。要实现您想要做的事情，您需要一个动画管理器

在这里，我们的动画管理器只有两个变量：一个是布尔值，用于知道我们是否正在移动，另一个是数组，用于累积排队的动画：

var moveManager = [];
var isMoving = false;

我还将计时器设置为全局，因为我们一次只有一个动画：

var timer;

之后，您需要制作动画管理器的逻辑，即：如果我不移动，并且我有一个排队的动画，那么播放它：

function nextMove() {
        if (!isMoving && moveManager.length) {
            var move = moveManager.shift();
            move();
    }
}

最后一件事是，每个动画都管理自己的开始、停止和调用下一个动画：

function turn_left(angle_rotation) {
    moveManager.push(function() {
    isMoving = true;
    angle = (angle - angle_rotation) % 360 ;
    isMoving = false;
    nextMove();
  });
}

有了这些，你可以继续你的乌龟

工作JSFIDLE=>

PS：我用你的代码来解释如何制作turle，但有些部分应该优化（使用
requestAnimationFrame
而不是使用
setInterval
，在类中制作所有这些以避免全局变量，…）
你的问题是你的代码是异步的。要实现您想要做的事情，您需要一个动画管理器

在这里，我们的动画管理器只有两个变量：一个是布尔值，用于知道我们是否正在移动，另一个是数组，用于累积排队的动画：

var moveManager = [];
var isMoving = false;

我还将计时器设置为全局，因为我们一次只有一个动画：

var timer;

之后，您需要制作动画管理器的逻辑，即：如果我不移动，并且我有一个排队的动画，那么播放它：

function nextMove() {
        if (!isMoving && moveManager.length) {
            var move = moveManager.shift();
            move();
    }
}

最后一件事是，每个动画都管理自己的开始、停止和调用下一个动画：

function turn_left(angle_rotation) {
    moveManager.push(function() {
    isMoving = true;
    angle = (angle - angle_rotation) % 360 ;
    isMoving = false;
    nextMove();
  });
}

有了这些，你可以继续你的乌龟

工作JSFIDLE=>

 PS：我用你的代码来解释如何使你的TURLE，但是某些部分应该被优化（使用<代码>请求动画框架< /代码>，而不是使用<代码> SETIFATION<代码>，使所有这些在类中避免全局VAR，……
不与你的主要问题相关，但是考虑做<代码>角=（角+ 360 -盎格鲁旋转）%360

为了确保你的角度保持积极，我认为你在这里很难得到有用的答案，因为你需要的是相对困难的。您的海龟指令，而不是立即执行操作，需要将预期操作添加到要执行的事情队列中。在每一帧（即使用<代码>窗口.RealestMimultFrase），您需要检查队列，以及当前动作的进度，并相应地动作。与您的主要问题无关，但考虑执行<代码>角度=（角度+ 360 -盎格鲁旋转）%360为了确保你的角度保持积极，我认为你在这里很难得到有用的答案，因为你需要的是相对困难的。您的海龟指令，而不是立即执行操作，需要将预期操作添加到要执行的事情队列中。在每一帧（即使用

窗口.requestAnimationFrame

），您需要检查队列和当前操作的进度，并相应地采取行动。哇，非常感谢！！！我认为现在的课程对我来说有点太难了，但在将来……它会像现在一样工作。PS部分只是一些改进点。但是，我很高兴能帮助您我还有一个问题：我想添加两个函数：pen_off（）和pen_on（）：pen_on（）使布尔值为true，并绘制直线，pen_off（）使布尔值为false，且未绘制直线，有一个跳转（例如，生成虚线）。请参阅更新的JSFIDLE=>。为了使

pen_on/pen_off

起作用，我添加了另一个var，它可以测试我是否绘制或是否只更新x/y位置谢谢！它工作得很好！我试图创建这样一个变量，但没有成功。我有很多东西要学。哇，非常感谢！！！我认为现在的课程对我来说有点太难了，但在将来……它会像现在一样工作。PS部分只是一些改进点。但是，我很高兴能帮助您我还有一个问题：我想添加两个函数：pen_off（）和pen_on（）：pen_on（）使布尔值为true，并绘制直线，pen_off（）使布尔值为false，且未绘制直线，有一个跳转（例如，生成虚线）。请参阅更新的JSFIDLE=>。为了使

pen_on/pen_off

起作用，我添加了另一个var，它可以测试我是否绘制或是否只更新x/y位置谢谢！它工作得很好！我试图创建这样一个变量，但没有成功。我有很多东西要学。